如何以角度获取矩阵表中选定的复选框答案

【问题标题】：How to get the selected checkbox in matrix-table in angular如何以角度获取矩阵表中选定的复选框
【发布时间】：2018-03-22 18:38:36
【问题描述】：

我已经设计了一个使用 html 的矩阵表，如链接中所示：

<h1>Responsive table of input-checkbox-matrix type</h1>
<h3>Permissions Table</h3>
<table class="responsive-table-input-matrix">
    <thead>
    <tr>
        <th></th>
        <th>Owner</th>
        <th>Administrators</th>
        <th>Managers</th>
        </tr>
    </thead>
    <tbody>

    <tr>
        <td>Add</td>
        <td><input type="checkbox"></td>
        <td><input type="checkbox"></td>
        <td><input type="checkbox"></td>
                </tr>
    <tr>
        <td>Edit</td>
        <td><input type="checkbox"></td>
        <td><input type="checkbox"></td>
        <td><input type="checkbox"></td>
                </tr>
    <tr>
    <td>Delete</td>
        <td><input type="checkbox"></td>
        <td><input type="checkbox"></td>
        <td><input type="checkbox"></td>

    </tr>
    </tbody>
</table>

现在我需要为表中的每一列和每一行设置 id，如果用户单击经理编辑权限的复选框，我需要将这些值存储在数组中。同样，最后我需要一个值数组，这些值都在单行中选择，例如编辑。

如何做到这一点？任何人都可以帮忙吗？以及如何在这里实现 *ngFor ？在此它是硬编码的。但我需要它是动态的。

提前致谢。

【问题讨论】：

所以你想在 angluarjs 中获得选中的复选框数组对吗？

标签： javascript angular typescript

【解决方案1】：

在你的 .ts 文件中创建一个对象数组

hasAdd = [
  {value: 'Owner', checked: false},
  {value: 'Admin', checked: false},
  {value: 'Manager', checked: false}
];
hasEdit = [
  {value: 'Owner', checked: false},
  {value: 'Admin', checked: false},
  {value: 'Manager', checked: false}
];
hasDelete = [
  {value: 'Owner', checked: false},
  {value: 'Admin', checked: false},
  {value: 'Manager', checked: false}
];

现在在您的模板中，

<tr>
    <td>Add</td>
    <td *ngFor="let a of hasAdd">
      <input name="hasAdd" [(ngModel)]="a.checked" type="checkbox">
    </td>
</tr>
<tr>
    <td>Edit</td>
    <td *ngFor="let e of hasEdit">
      <input name="hasEdit" [(ngModel)]="e.checked" type="checkbox">
    </td>
</tr>
<tr>
    <td>Delete</td>
    <td *ngFor="let d of hasDelete">
      <input name="hasDelete" [(ngModel)]="d.checked" type="checkbox">
    </td>
</tr>

要获得选定的选项，您可以将每个对象数组传递给此函数。

selectedOptions(myarray) { 
return myarray
          .filter(opt => opt.checked)
          .map(opt => opt.value)
 }

【讨论】：