如何操作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 {}