Question

我不确定这个标题是否会对我的问题做出公正的判断，但现在是。

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

<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作为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>

在您的组件类中，定义方法setToolbarStyle(key)：

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

在* ngFor中设置背景颜色

2 个答案: