代码之家 › 专栏 › 技术社区 › Aakash Thakur

在*ngFor中设置背景色

angular-material2 angular-material angular css

1

Aakash Thakur · 技术社区 · 9 年前

我不确定这个标题是否能公正地回答我的问题,但它就在这里。

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;
}

2 回复 | 直到 5 年前

1

2

Max Koretskyi 9 年前

您可以在 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
}

2

1

FAISAL 9 年前

<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;
}