ngFor 中可迭代的两种方式绑定

Question

我正在使用ngFor创建一个包含可点击图标的项目列表。
当我点击一个图标时，它会调用一个函数来更新后端的变量，成功时，我希望图标改变颜色。

如何“双向”绑定可迭代变量，obj以便当我在控制器中修改它时，它会反映在模板中？

模板：

<ion-item *ngFor="let obj of contactList | separator  " 
(click)="show_memories(obj.key, obj.bookName)" class="task-snoozed" no-lines>
    <button ion-button icon-only clear 
   (click)="$event.stopPropagation(); sendChangeState(obj, 'toBe', obj.toBeAlerted)">
        <ion-icon name="arrow-dropleft-circle" size="large" 
        [color]="obj.toBeAlerted ? 'primary' : 'gray-light'"></ion-icon>
    </button>

</ion-item>

控制器：

sendChangeState(contact:any, alertType:string, bool:boolean){

    this.firestoreService.changeAlertState(this.userId, contact.key, alertType, bool)
    .then(() => {
        //update the icon color here:
        contact.toBeAlerted = !contact.toBeAlerted; 
    });     
}

编辑 contactList 是一个像这样的对象：

Answer 1

当您使用属性绑定绑定单个 CSS 属性时，请始终使用 style.property-name 如下：

使用 [style.color] 而不是 [color]

替换下面的行

[color]="obj.toBeAlerted ? 'primary' : 'gray-light'"

和

[style.color]="obj.toBeAlerted ? 'primary' : 'gray-light'"

您还可以使用 ngStyle 有条件地应用 css，如下所示

[ngStyle]="{'color': "obj.toBeAlerted ? 'primary' : 'gray-light'"}"