選擇/取消選擇角度2中的所有功能

Question

我是angular 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調用：

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

Answer 1

在Angular2中，首選方法是將HTML綁定到模型，更新模型並讓Angular更新DOM，例如：

@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);
  }
}

Answer 2

使用數據驅動表，您可以通過更新行模型的“ 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>

然后在組件中：

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)
}

請注意，這對於您在手動選中所有復選框時也要處理情況非常重要，它應該自動選中checkAll復選框。 反之亦然。

演示： http ： //plnkr.co/edit/Nw8Wk0kXSbQLkAE7yW0e？p = info