Angular 4.x：如何在 Angular 4.x 中将表格复选框与按钮绑定？答案

【问题标题】：Angular 4.x: How to bind table checkbox with button in Angular 4.x?Angular 4.x：如何在 Angular 4.x 中将表格复选框与按钮绑定？
【发布时间】：2017-10-21 17:00:12
【问题描述】：

我是 Angular 4.x 的新手。我有一个 html 表。每行都有一个复选框和一个复选框。我想将复选框与按钮绑定，以便在选中复选框时启用按钮，当未选中复选框时，禁用按钮：这是一个代码示例，但它不起作用：

  <tbody>
    <tr *ngFor="let item of mf.data; let i = index;">
      <td><input type="checkbox" value="" [checked]="item.checked"></td>

      <td>{{i}}</td>
      <td>{{item.name}}</td>
      <td>{{item.email}}</td>
      <td>{{item.age}}</td>
      <td>{{item.city | uppercase}}</td>
      <td><button type="button" class="btn btn-success" [disabled]="item.checked">start</button></td>
    </tr>
  </tbody>

你能帮我完成这项工作吗？

【问题讨论】：

标签： html angular checkbox

【解决方案1】：

使用[(ngModel)]。因为check 不会启用双向绑定。它只处理单向变化

<td><input type="checkbox" value="" [(ngModel)]="item.checked"></td>

使按钮禁用不等于项目检查，例如[disabled]="!item.checked"

<td><button type="button" class="btn btn-success" [disabled]="!item.checked">start</button></td>

【讨论】：

【解决方案2】：

目前您的复选框仅绑定一种方式。要通过单击应用更改，请将以下内容添加到您的输入标签： (change)="item.checked = !item.checked"

【讨论】：

【解决方案3】：

您不需要检查指令。只需绑定模型即可。

  <tbody>
<tr *ngFor="let item of mf.data; let i = index;">
  <td><input type="checkbox" [(ngModel)]="item.checked"></td>

  <td>{{i}}</td>
  <td>{{item.name}}</td>
  <td>{{item.email}}</td>
  <td>{{item.age}}</td>
  <td>{{item.city | uppercase}}</td>
  <td><button type="button" class="btn btn-success" [disabled]="!item.checked">start</button></td>
<pre>{{item.checked}}</pre>
</tr>
  </tbody>

  <tbody>
    <tr *ngFor="let item of mf.data; let i = index;">
      <td><input type="checkbox" value="" [checked]="item.checked"></td>

      <td>{{i}}</td>
      <td>{{item.name}}</td>
      <td>{{item.email}}</td>
      <td>{{item.age}}</td>
      <td>{{item.city | uppercase}}</td>
      <td><button type="button" class="btn btn-success" [disabled]="item.checked">start</button></td>
    </tr>
  </tbody>

【讨论】：

【解决方案4】：

使用这个：

    <td>
       <div class="togglebutton">
          <label>
            <input type="checkbox" [checked]="record.status" (change)="changeStatus(record.id,$event)">
             <span class="toggle"></span>

            </label>
       </div>
    </td>

【讨论】：