Angular：从组件更新 ngModel 数据时，UI 更改不会更改模型值

Question

在表格中我使用了一个复选框，在任何时候用户都只能选择 2 个复选框。因此，每当用户选择复选框时，我都会调用一个函数并检查是否选择了超过 2 个复选框，如果是，我将显示一条错误消息并将第三个复选框更改为未选中状态。

将复选框值更改为未选中后，如果我再次从 UI 将复选框更改为选中状态，模型不会更新

<input _ngcontent-c9="" type="checkbox" class="ng-valid ng-dirty ng-touched" ng-reflect-model="false">

ng-reflect-model="false"此值不会再次变为真。

 <input type="checkbox" [(ngModel)]="item.blink" (change)="toggleBlink(item)">

  private toggleBlink(currentDevice) {
     //conditions to chk if more than 2 checkbox r checked then i m making current one as unchecked
        currentDevice['blink'] = false;

  }

如何做到这一点？

Answer 1

我已经创建了一个逻辑来计算是否选中了两个复选框中的任何一个，然后取消选中第三个。

private toggleBlink(i, val) {
   let count = 0;
       this.test.forEach(value =>{
         // console.log(value);
         if(value.blink === true){
           count++
         }
       })
       console.log(count)
       if(count === 3){
         this.test[i].blink = false;
   }
}

但问题是，如果数组被更改，ng for 不会像 ng for 那样刷新，所以我通过它的副本更改数组。

 this.test = JSON.parse(JSON.stringify((this.test)));

我正在使用JSON.parse(JSON.stringify())，所以我的 javascript 不会创建 浅拷贝。

这里是stackblitz

Answer 2

如果您不想修改复选框的状态，那么（更改）事件将无济于事，请尝试（单击）：

<li *ngFor="let item of test; let i = index">
{{item.blink }}
    <input type="checkbox" [(ngModel)]="item.blink" (click)="toggleBlink($event, item)">{{item.name}}
</li>

TS：

private toggleBlink(event, i) {
  console.log(i);
  if (i.name === "Mushroom") {
    i["blink"] = false;
    // below two lines important to stop checkbox being checked
    event.stopPropagation();
    return false;
  }
  console.log("after changing", i);
}

Working_Demo

Answer 3

感谢 Dani 和 Pranshant :)

我找到了解决方案。现在检查代码

https://stackblitz.com/edit/angular-gxmekl-j3wwgm?file=app%2Fselect-multiple-example.ts

Answer 4

看起来像一个竞争条件， 尝试将（更改）替换为（ngModelChange）

编辑： 要解决竞争条件，您可以执行“脏” setTimeout 解决方案： https://stackblitz.com/edit/angular-gxmekl-j3wwgm