javascript - 如何在Angular的矩阵表中获取选定的复选框

我设计了一个矩阵表，在链接中使用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中实现？在此它是硬编码的。但是我需要保持动态。

提前致谢。

最佳答案

在您的.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)
 }

关于javascript - 如何在Angular的矩阵表中获取选定的复选框，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49436139/