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'"}"

Answer 2

这可以完成工作：

 <ion-item *ngFor="let obj of contactList | separator; index as i;" (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]="contactList[obj.key].toBeAlerted ? 'primary' : 'gray-light'"></ion-icon>
    </button>

</ion-item>