需要在选中复选框后立即取消选中它。 角度4

Question

i have an object array with a Boolean property bound to a check box

plunkr https://plnkr.co/edit/j25nOhYm1MNeJzUJzBBs

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

in html i tried ngModel and ngModelChange

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

i have also tried [checked] and (change)

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

also tried

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

updated the plunkr but the event code

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

is unable to "de-select" the checkbox

Answer 1

You don't need to change the object to keep the selected status, change the array to

this.data =  ["Ford","BMW","Fiat"]

<ul>
  <li *ngFor="let item of data">
    <label>
      <input type="checkbox"
        ng-model="xyx"
        ng-click="toggleItem(item)"
        ng-checked="selectedItems.indexOf(item) > -1"
        ng-required="selectedItems.length == 0" /> 
        {{item}}</label>
  </li>                  
</ul>

toggleItem(item){
    var index = this.selectedItems.indexOf(item);
    if(index == -1) {
      this.selectedItems.push(animal);
    }
    else{
      this.selectedItems.splice(index, 1);
    }
}

See the working demo here

Answer 2

You can 'hack' this with setTimeout , which will just a tinytinty time later set the checkbox to false :)

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

in your sample demo, I used the ngModel and ngModelChange version: https://plnkr.co/edit/53Tb6wiXYAlat52VPuwG?p=preview

Answer 3

the solution was to use ngModel with change event along with click event

[(ngModel)]="item.selected" (change)="select(dataItem,$event)" (click)="checkExceed($event,dataItem)"

on the click when total number of attempts are greater than xi simply use

$event.preventDefault();