在 *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 as boolean 属性。然后进行以下更改：

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

在您的组件 class 中，定义方法 setToolbarStyle(key):

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

在 *ngFor 中设置背景颜色

Set background color in *ngFor

css

angular-material

angular-material2

angular