如何操作HTML元素Angular2

Question

比方說，我有這個表：

我想check的頂端的複選框，並擁有所有這些檢查，或者uncheck它然後讓所有的他們未檢查。

jQuery中，這樣的事情：

$("#mytable tbody :checkbox").prop('checked', true); 

您還可以找到一個複選框，並應用改變它。

我只是沒有看到如何建立與這些checkboxex的雙向綁定，因爲它們是動態構建的。

<tr *ngFor="let tRow of initConsView.bodyData"> 
    <td *ngFor="let col of tRow"> 
    <input *ngIf="col.key == 'Id'" 
      type="checkbox" [attr.id]="'ck_' + col.value"               
      (change)="onChecked($event, col.value)" />             
    <span *ngIf="col.key != 'Id'">{{ col.value }}</span> 
    </td> 
</tr> 

我需要通過代表每個複選框的ID數組跟蹤每個chekbox嗎？

有了一個複選框，我可以做這樣的事情：

[checked]="someValueInTheTypeScriptFile" 

我雖然已經關於使用含複選框嵌套的組件。不幸的是，問題依然存在。事實上，從組件向容器發送數據將很容易。但是，定位一些或全部複選框是有點困難的。

感謝您的幫助

Answer 1

要做到這一點的角度，你應該使用綁定這一點。每行都需要有一個isChecked屬性，用於[(ngModel)]="isChecked"綁定。

的頂部複選框，然後將觸發，通過用於填充複選框列表，並設置其屬性isChecked要麼true或false所有項目循環的方法。

在模板

<!-- Top checkbox --> 
<input type="checkbox" (change)="onCheckTop($event.target.checked)" /> 

<!-- Other checkboxes --> 
<tr *ngFor="let tRow of initConsView.bodyData"> 
    <td *ngFor="let col of tRow"> 
    <input *ngIf="col.key == 'Id'" 
      type="checkbox" [attr.id]="'ck_' + col.value"               
      (change)="onChecked($event, col.value)" 
      <!-- ---------------------------------------- --> 
      [(ngModel)]="tRow.isChecked" /> <!-- Add this --> 
      <!-- ---------------------------------------- -->            
    <span *ngIf="col.key != 'Id'">{{ col.value }}</span> 
    </td> 
</tr> 

在TS文件

onCheckTop(check: boolean) { 
    this.initConsView.bodyData.forEach(data => data.isChecked = check); 
} 

在你ngModule確保添加FormsModule，所以你可以使用[(ngModel)]指令在你的模板

// Other imports 
import { FormsModule } from '@angular/forms'; 

@NgModule({ 
    imports: [ ..., FormsModule ], 
    .... 
}) 
export class AppModule {}