Angular 自定义垫片颜色

Question

有什么办法可以让 mat chip 具有除 primary、accent、warn 和 default 之外的自定义颜色？ 这是我的代码

 <mat-chip *ngIf="status.name==='open'" color="warn" selected trans>{{status.display_name}}</mat-chip>
                <mat-chip *ngIf="status.name==='pending'" color="accent" selected trans>{{status.display_name}}</mat-chip>
                <mat-chip *ngIf="status.name==='assigned'" color="primary" selected trans>{{status.display_name}}</mat-chip>
                <mat-chip *ngIf="status.name==='verification'" color="yellow" selected trans>{{status.display_name}}</mat-chip>

是的，很明显我希望最后一个垫子芯片具有黄色。 color='primary' 现在是黑色的，我想把它改成绿色，但我不知道该怎么做。 任何帮助，将不胜感激。

Answer 1

您需要添加 CSS class 而不是color="primary"创建您自己的 CSS class

.assigned-chip{
     background-color: <<color code>> // as per your requirement
}

<mat-chip *ngIf="status.name==='assigned'" class="assigned-chip">{{status.display_name}}</mat-chip>

Answer 2

我为您的问题找到了另一种解决方案。 我正在使用 Angular 13，使用[ngStyle]可以更改 CSS 属性的值，甚至可以从 TS 文件组件中插入一个值。 我知道这是不对的，因为CSS代码应该写在style文件中，但是有时候我们做一个异常就可以解决问题。 我希望这可以帮助某人，也许有更好的解决方案，但它对我有用。

<mat-chip *ngFor="let tag of tags" [ngStyle]="{'background-color': colorTags[tag]}">
  {{tag}}
</mat-chip>