Angular 如何通过脚本更改离子标签的颜色?
我想更改标签{{person.name}的颜色 通过my.Ts文件中的脚本。 当我点击按钮时,我将用户添加到数组中&我想改变他的颜色,向用户解释这个已经被选中了 以下是我的html代码:Angular 如何通过脚本更改离子标签的颜色?,angular,ionic-framework,Angular,Ionic Framework,我想更改标签{{person.name}的颜色 通过my.Ts文件中的脚本。 当我点击按钮时,我将用户添加到数组中&我想改变他的颜色,向用户解释这个已经被选中了 以下是我的html代码: <ion-list> <ion-item-sliding *ngFor="let person of (personList | async)"> <ion-item-options side="start">
<ion-list>
<ion-item-sliding *ngFor="let person of (personList | async)">
<ion-item-options side="start">
<ion-item-option color="danger" (click)="delete(person.id)">
<ion-icon slot="icon-only" name="trash-sharp"></ion-icon>
</ion-item-option>
</ion-item-options>
<ion-item class="item-content">
<ion-label color="this.label_color[person.id]">{{person.name}}</ion-label>
</ion-item>
<ion-item-options side="end">
<ion-item-option (click)="add(person.id)">
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-item-option>
</ion-item-options>
</ion-item-sliding>
</ion-list>
感谢阅读并提供帮助:)在您的模型中为
个人添加属性:
person.ts
export class Person {
name: string;
.
.
selected: boolean;
constructor() {
}
}
CSS/SCSS
.red-color {
color: red;
}
HTML
<ion-label [ngClass]="{'red-color': person.selected}">{{person.name}}</ion-label>
}非常感谢@manish!你很快就完美地回答了我的问题。祝你今天愉快。当然,很高兴我能帮上忙。
<ion-label [ngClass]="{'red-color': person.selected}">{{person.name}}</ion-label>
add(user){
const index: number = this.arr_Customers.indexOf(user);
if (index == -1) {
user.selected = true;
this.arr_Customers.push(user);
}