javascript - 使用 ngFor 解析二维数组时在表格单元格中添加复选框

Question

我有一个二维数组。

 var arr = [
            { ID: 1, Name: "foo", Email: "foo@foo.com", isChecked: "true" },
            { ID: 2, Name: "bar", Email: "bar@bar.com", isChecked: "true" }               
        ]

所以我想在表格中显示数据。

this.tableData = arr.map(function (obj) {
            return Object.keys(obj).map(function (key) {
                return obj[key];
            });
        });

我用ngFor.

<table class='table' *ngIf="tableData">
<tbody>
    <tr *ngFor="let data of tableData;">
        <td *ngFor="let cell of data">
          {{ cell['name'] }}
        </td>
    </tr>
</tbody>
</table>

现在我想要更多，我想在单元格中的文本旁边添加复选框。我尝试了什么：

<tr *ngFor="let data of tableData;">
    <td *ngFor="let cell of data">
      <input type="checkbox" [checked]="cell['isChecked']">
      {{ cell['name'] }}
    </td>
</tr>

但是没有显示复选框。

Answer 1

您已阐明要为arr. 每个表格行都应显示元素和元素属性Name的复选框。isChecked

要实现这一点，您无需创建tableData已创建的二维数组，只需循环arr. 您可以绑定到isChecked使用[(ngModel)].

您也不需要表格，因为每行只有一个“东西”。如果您愿意，您可以轻松地将这种技术应用于表格。

组件.ts

arr = [
  { ID: 1, Name: "foo", Email: "foo@foo.com", isChecked: true },
  { ID: 2, Name: "bar", Email: "bar@bar.com", isChecked: false }             
];

组件.html

<div *ngFor="let data of arr">
  <label>
    <input type="checkbox" [(ngModel)]="data.isChecked">
    {{ data.Name }}
  </label>
</div>

演示：https ://stackblitz.com/edit/angular-uzxcgq