当我设置材质芯片颜色时它不起作用

Question

我正在使用角材料 8.2.3，当我尝试设置芯片时，颜色芯片仍然是灰色的

<mat-chip-list>
    <mat-chip color="accent" removable (removed)="removeFilter()">
        Filter view on {{dateFrom | date:'yyyy:MM:dd'}}
        <mat-icon matChipRemove>cancel</mat-icon>
    </mat-chip>
</mat-chip-list>

我已经尝试了所有颜色（警告、原色等），但芯片的颜色仍然是灰色的。有谁知道为什么？

Answer 1

显然，颜色只有在mat-chip选择后才会应用。

要将其标记mat-chip为已选择，您需要为其指定一个selected属性。

在这里，尝试一下：

<mat-chip-list>
    <mat-chip selected color="accent" removable (removed)="removeFilter()">
        Filter view on {{dateFrom | date:'yyyy:MM:dd'}}
        <mat-icon matChipRemove>cancel</mat-icon>
    </mat-chip>
</mat-chip-list>

这是供您参考的示例演示。

更新：自 Angular Material v15 起：

mat-chip-list已替换为mat-chip-listbox.

因此，如果您使用 Angular Material v15，代码将如下所示：

<mat-chip-listbox>
    <mat-chip selected color="accent" removable (removed)="removeFilter()">
        Filter view on {{dateFrom | date:'yyyy:MM:dd'}}
        <mat-icon matChipRemove>cancel</mat-icon>
    </mat-chip>
</mat-chip-listbox>

更新：自 Angular Material v16 起：

要将其标记mat-chip为已选择，您需要为其指定一个属性。selected highlighted

因此，如果您使用 Angular Material v16，代码将如下所示：

<mat-chip-listbox>
    <mat-chip highlighted color="accent" removable (removed)="removeFilter()">
        Filter view on {{dateFrom | date:'yyyy:MM:dd'}}
        <mat-icon matChipRemove>cancel</mat-icon>
    </mat-chip>
</mat-chip-listbox>

这是供您参考的示例演示。