角度2のすべての機能を選択/選択解除します

Question

新規：角度2 &すべて選択/選択解除を作成しようとしています。私はこのようなテーブルを持っている：

<table> 
    <thead> 
     <tr> 
      <th><input type="checkbox" name="selectAll"></th> 
      <th>Name</th> 
      <th>Number</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td><input type="checkbox"></td> 
      <td>abc</td> 
      <td>9876373773</td> 
     </tr> 
     <tr> 
      <td><input type="checkbox"></td> 
      <td>abc</td> 
      <td>9876373773</td> 
     </tr> 
     <tr> 
      <td><input type="checkbox"></td> 
      <td>abc</td> 
      <td>9876373773</td> 
     </tr> 
    </tbody> 
</table> 

ユーザーがのSelectAllチェックボックスをクリックするのであれば、他のチェックボックスをチェックしに取得する必要があります。データが動的に来て、ここに私のAPIコールは次のとおりです。Angular2で

this.contactService.getName(this.pageNumber, this.pageSize) 
     .subscribe(
     data => { 
      this.contactlist = data.results; 
     }, 
     err => console.error(err), 
     () => console.log('Contact list fetched') 
    ); 

Answer 1

データ駆動型テーブルでは、行モデルの "checked"フラグを更新することでこれを実現できます。コンポーネントで

<table> 
    <thead> 
     <tr> 
      <th><input type="checkbox" name="selectAll" [checked]="toggle" (change)="toggleAll()"></th> 
      <th>Name</th> 
      <th>Number</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr *ngFor="let item of items"> 
      <td><input type="checkbox" [checked]="item.checked" (change)="toggleItem(item)"></td> 
      <td>{{ item.name }}</td> 
      <td>{{ item.number }}</td> 
     </tr> 
    </tbody> 
</table> 

そして：これは手動ですべてのチェックボックスをチェックするときにも、ケースを処理し、それが自動的にcheckAllを確認することが重要であることを

toggle = false 

items = [ 
    { name: 'aaa', number: '3452342343' }, 
    { name: 'aaa', number: '3452342343' } 
] 

toggleItem(item) { 
    item.checked = !item.checked 
    this.toggle = this.items.every(item => item.checked) 
} 

toggleAll() { 
    this.toggle = !this.toggle 
    this.items.forEach(item => item.checked = this.toggle) 
} 

注たとえば、あなたがこのような何かを行うことができますチェックボックス。そして逆も同様です。

デモ：http://plnkr.co/edit/Nw8Wk0kXSbQLkAE7yW0e?p=info

Answer 2

好ましい方法は次のようにDOMを、モデルにHTMLをバインドモデルを更新し、角度の更新をさせることです。

で

@Component({ 
    selector: 'my-comp', 
    template: ` 
<table> 
    <thead> 
     <tr> 
      <th><input type="checkbox" name="selectAll" (click)="toggleAll($event.target.checked)"></th> 
      <th>Name</th> 
      <th>Number</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr *ngFor="let item of contactlists let i=index"> 
      <td><input type="checkbox" [(ngModel)]="checkedItems[i]"></td> 
      <td>{{item.name}}</td> 
      <td>{{item.value}}</td> 
     </tr> 
    </tbody> 
</table> 
`)} 
export class MyComponent { 
    constructor() { 
    this.contactService.getName(this.pageNumber, this.pageSize) 
     .subscribe(
     data => { 
      this.contactlist = data.results; 
      this.checkedItems = new Array(this.contactlist?.length).fill(false); 
     }, 
     err => console.error(err), 
     () => console.log('Contact list fetched') 
    ); 
    } 
    /* data set dynamically from `contactService` instead according to updated question 
    items = [ 
    {name: abc, number: 9876373771, checked: false}, 
    {name: def, number: 9876373772, checked: false}, 
    {name: ghi, number: 9876373773, checked: false}, 
    ]; */ 

    toggleAll(checked) { 
    this.items.forEach((item) => item.checked = checked); 
    } 
}