Question

我在表中使用了一个复选框，用户在任何时间都只能选择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

看起来像是种族状况，尝试将（change）替换为（ngModelChange）

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

Answer 2

感谢Dani和Pranshant：）

我找到了解决方案。立即检查代码

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

Answer 3

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

<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 4

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

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唯一的刷新，因此我通过其副本更改了数组。

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

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

这里是correct way

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

4 个答案: