当我连续选择复选框时。它选择了 Angular 7 表中所有可用的复选框？答案

【问题标题】：When I select checkbox in a row. It selects all the checkbox available in angular 7 table?当我连续选择复选框时。它选择了 Angular 7 表中所有可用的复选框？
【发布时间】：2019-06-17 08:21:58
【问题描述】：

当我连续选择一个复选框时，它会选择表中所有可用的复选框。这是我用于在表格中填充复选框的代码

<thead>
<tr>
   <th scope="col">Attach</th>
   <th scope="col">Link</th>
</tr>
</thead>

<tbody>
    <tr *ngFor="let list of complianceReports.selectedData;let i = index">
        <td>
            <input id=" {{ i+1 }} " type="checkbox" name="attach[$index]" class="setup-checkbox" [(ngModel)]="complianceReports.attach[$index]">{{i+1}}
        </td>
        <td>
            <input id="complianceReports.link[$index]" type="checkbox" name="link[$index]" class="setup-checkbox" [(ngModel)]="complianceReports.link[$index]">
        </td>
    </tr>
</tbody>

如何在 Angular 7 中根据需要连续选择复选框

【问题讨论】：

它的 ng 模型问题.. 可能是所有复选框的 ngModel 值都相同。它应该是唯一的
您确定您的代码吗？你有一个数组（selectedData）的项目（列表），然后你忽略了（list和selectedData）并访问另外两个数组（附加和链接）？不应该是每个项目：“list.attach”和“list.link”吗？
@antseq 是的，我的代码是正确的。我正在使用两个不同的数组来绑定复选框
您可以粘贴正在使用的数组的示例数据吗？
我认为是 $index 的主要问题，因为它没有改变所有绑定到相同参考的输入????????

标签： angular checkbox

【解决方案1】：

当你绑定到 ngModel 时，你需要使用 i (index) 代替 $index ??

<tr *ngFor="let list of complianceReports.selectedData;let i = index">
    <td>
        <input type="checkbox" class="setup-checkbox" [(ngModel)]="complianceReports.attach[i]">{{i+1}}
    </td>
    <td>
        <input  type="checkbox" class="setup-checkbox" [(ngModel)]="complianceReports.link[i]">
    </td>
</tr>

【讨论】：

【解决方案2】：

您在使用 Angular 的标签属性中使用变量时遇到了麻烦。您的问题来自您输入的name。它们都是一样的：字符串attach[$index]。你应该在 name 周围使用括号来告诉 Angular 它需要插入它的值。

<tbody>
    <tr *ngFor="let list of complianceReports.selectedData;let i = index">
        <td>
            <input [id]="i+1" type="checkbox" [name]="attach[$index]" class="setup-checkbox" [(ngModel)]="complianceReports.attach[$index]">{{i+1}}
        </td>
        <td>
            <input [id]="complianceReports.link[$index]" type="checkbox" [name]="link[$index]" class="setup-checkbox" [(ngModel)]="complianceReports.link[$index]">
        </td>
    </tr>
</tbody>

【讨论】：

当我使用 name 作为 [name] 时，我收到以下问题 TypeError: Cannot read property 'undefined' of undefined
因为你的对象attach[$index]必须是一个复杂的对象。它必须是唯一的字符串或数字。