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

Question

我使用 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 中实现这里？在此它是硬编码的。但我需要它是动态的。

提前致谢。

Answer 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)
 }