在 *ngFor 中设置背景颜色

Question

我不确定这个标题是否能解决我的问题，但就是这样。

我有一个来自 angular material2 的md-toolbar，我正在循环获取动态值：

<md-toolbar (click)="selectedToolbarValue(key.Name)" *ngFor="let key of arrayOfKeys; let i=index">
       <span>{{key.Name}}</span>
</md-toolbar>

现在我想通过[ngClass] 为特定点击的工具栏设置背景颜色。这就是我所做的：

<md-toolbar [ngClass]="{'toolBarColor':setToolbarStyle}" (click)="selectedToolbarValue(key.Name)" *ngFor="let key of arrayOfKeys; let i=index">
       <span>{{key.Name}}</span>
</md-toolbar>

在.ts:

setToolbarStyle:boolean=false;
selectedToolbarValue(value){
    this.setToolbarStyle = true;
    //other code
}

在.scss:

.toolBarColor{
background-color:blue;
color:#fff;
}

现在上面的代码发生了什么，它为循环中的所有工具栏值设置样式。如何仅设置被单击的工具栏的样式？

Answer 1

您可以在ngClass 表达式中使用函数而不是值。该函数可以采用索引或任何其他唯一标识符：

<md-toolbar [ngClass]="{'toolBarColor':setToolbarStyle(i)}" (click)="selectedToolbarValue(key.Name, i)" *ngFor="let key of arrayOfKeys; let i=index">

toolbarStyleIndex: number;

setToolbarStyle(i) {
    return i===toolbarStyleIndex;
}

selectedToolbarValue(value, i){
    this.toolbarStyleIndex = i;
    //other code
}

Answer 2

您可以在 arrayOfKeys 中添加 setToolbarStyle 作为布尔属性。然后进行以下更改：

<md-toolbar [ngClass]="{'toolBarColor': setToolbarStyle(key)}" 
            (click)="selectedToolbarValue(key.Name)" 
            *ngFor="let key of arrayOfKeys; let i=index">        
    <span>{{key.Name}}</span>
</md-toolbar>

在你的组件类中，定义方法setToolbarStyle(key):

setToolbarStyle(key:any) : boolean {
    key.setToolbarStyle = true;
    return key.setToolbarStyle;
}