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或{{1 }}

在模板中

false

在TS文件中

<!-- 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>

在onCheckTop(check: boolean) { this.initConsView.bodyData.forEach(data => data.isChecked = check); } 中，请务必添加ngModule，以便在模板中使用FormsModule指令

[(ngModel)]

如何操作Angular2

1 个答案: