Angular-4:使用复选框进行多选

时间:2017-11-24 06:49:27

标签: javascript angular checkbox angular4-forms

使用Angular 4 - 如果取消选中复选框,如何从数组中删除项目? 有人可以显示组件功能,这样做会是什么样的??? 非常感谢。 我的代码如下:

**app.component.html:**

<div>
<h2>SAMPLE</h2>
<input [(ngModel)] = "newItem" type="text" placeholder="Add Item">
<button (click)="addItem()">ADD</button>
<ul *ngFor="let i of Items ; let ind=index" >
<li><input type="checkbox" [checked]="stat" (click)="flagged(ind)" >{{i}}</li>
</ul>
<ul *ngFor="let f of flaggedItems"><li>
<h3>Flagged array : {{f}}</h3>
</li></ul>
</div>


**app.component.ts :**

flagged(index) {
    this.toggler();
    this.i = 0;
    while (this.i < this.flaggedItems.length )
        {
        if ( index === this.flaggedItems[this.i]){
          this.presentin = this.i;
          this.present = true;
          break;
        }
      this.i++;
       }
       if (this.stat === true && !this.present) {
          this.flaggedItems.push(index);
       }
    else {
         this.flaggedItems.splice( this.presentin, 1);
       }
  }

  toggler() {
    if (!this.stat){
      //this.pr = 'checked';
      this.stat = true;
     }
    else {
      //this.pr = 'Unchecked';
      this.stat = false;
    }
  }

1 个答案:

答案 0 :(得分:0)

你试过吗。

(change)="doSomething($event)"

这可能是处理复选框最合适的事件。