Добавьте флажок в ячейку таблицы при использовании 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>

Но ckeckbox не отображается.

Answer 1

Вы пояснили, что хотите отобразить одну строку для каждого элемента в arr. В каждой строке таблицы должен отображаться элемент Name и флажок для свойства элемента isChecked.

Для этого вам не нужно создавать созданный вами двумерный массив tableData, Вы можете просто l oop сверх arr. Вы можете привязать к isChecked, используя [(ngModel)].

Вам также не нужна таблица, поскольку у вас есть только одна «вещь» на строку. Вы можете легко применить эту технику к столу, если вы будете использовать sh для компонента.

component.ts

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

component. html

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

ДЕМО: https://stackblitz.com/edit/angular-uzxcgq