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

如何以矩形方式获取矩阵表中的选中复选框

1 个答案: