javascript - 需要在选中复选框后立即取消选中该复选框。 Angular 4

Question

我有一个对象数组，其 bool 属性绑定(bind)到复选框

普朗克 https://plnkr.co/edit/j25nOhYm1MNeJzUJzBBs

 this.data =  [{ "name":"Ford", "selected":false},
    { "name":"BMW","selected":false },
    { "name":"Fiat","selected":false }
]

在 html 中我尝试了 ngModel 和 ngModelChange

  <li *ngFor="let item of data;">
    <input class="checkbox binning-checkbox" type="checkbox"  
    (ngModelChange)="select(item)" [(ngModel)]="item.selected">
   {{ item.name}}
  </li>

我也尝试过[检查]和(更改)

  <li *ngFor="let item of data;">
    <input class="checkbox binning-checkbox" type="checkbox"  
    (change)="select(item)" [checked]="item.selected">
   {{ item.name}}
  </li>

也尝试过

<div>
<li *ngFor="let item of data;">
    <input class="checkbox binning-checkbox" type="checkbox" (change)="select(item)" [(ngModel)]="item.selected"> {{ item.name}}
</li>

更新了 plunkr但是事件代码

 public select(item){
alert(item.selected );
item.selected = false;  }

无法“取消选择”复选框

Answer 1

您可以使用 setTimeout 来“破解”此功能，这将在很短的时间内将复选框设置为 false :)

public select(item){
  setTimeout(() => {
    item.selected = false;
  })
}

在您的示例演示中，我使用了 ngModel 和 ngModelChange 版本:https://plnkr.co/edit/53Tb6wiXYAlat52VPuwG?p=preview