Angular 2 Material md-chips颜色属性不起作用

时间:2017-04-12 07:29:12

标签: angular colors md-chip

当我尝试使用颜色属性设置我的md-chips样式时没有任何反应。根据指南https://material.angular.io/components/component/chips,这必须奏效。我的所有其他元素都没有问题。

<md-chip-list>
    <md-chip color="primary"> Chicken </md-chip>
    <md-chip color="warn"> Table </md-chip>
    <md-chip color="accent"> Tree </md-chip>
    <md-chip> Eight </md-chip>
</md-chip-list>

结果:enter image description here

有人知道如何解决这个问题吗?

提前致谢!

3 个答案:

答案 0 :(得分:15)

根据plunkr example,当selected属性设置为true时,芯片才会着色:

<md-chip color="accent" selected="true">Chicken</md-chip>

答案 1 :(得分:3)

您可以使用ngStyle

动态设置md-chip颜色
<md-chip-list>
 <md-chip *ngFor="let item of itemList" [ngStyle]="{ backgroundColor: item.color }">
{{ item.name }}
</md-chip>
</md-chip-list>

答案 2 :(得分:1)

现在(2017年9月24日),这不起作用。即使在文档中的示例不起作用

enter image description here

我被迫使用CSS属性:

<md-chip color="primary" [selected]="true" style="background-color: #986f37">Content here</md-chip>