Перебрать объект и отобразить его в таблице Angular 6 - PullRequest
Новая
       10

Перебрать объект и отобразить его в таблице Angular 6

3 голосов
/ 18 марта 2019

У меня есть объект, который выглядит так: 

obj = {'a': [0, 0, 1, 0], 'b': [1, 0, 0, 1], 'c': [0, 0, 0, 0], 'd': [1, 1, 1, 0]}

И я хочу отобразить это в виде таблицы: 

No   | a | b | c | d 
0    | 0 | 1 | 0 | 1
1-3  | 0 | 0 | 0 | 1
4-6  | 1 | 0 | 0 | 1
7-9  | 0 | 1 | 0 | 0
      //a //b //c //d

Как я могу сделать это, используя ngFor?

Вот мой HTML 

<table>
  <thead>
    <tr>
    <th scope="col">No</th>
    <th scope="col">a</th>
    <th scope="col">b</th>
    <th scope="col">c</th>
    <th scope="col">d</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>0</td>
      <td></td>
    </tr>
    <tr>
      <td>1-3</td>
      <td></td>
    </tr>
    <tr>
      <td>4-6</td>
      <td></td>
    </tr>
    <tr>
      <td>6-9</td>
      <td></td>
    </tr>
  </tbody>
<table>

Если я попытаюсь перебрать obj, я получу

Ошибка: не удается найти другой поддерживающий объект '[object Object]' типа 'object'. NgFor поддерживает только привязку к итерациям, таким как массивы.

Как я могу решить это? Спасибо за ваше время! Вот рабочий фрагмент

Ответы [ 2 ]

4 голосов
/ 18 марта 2019

Вы можете использовать ключевую трубу: 

<div *ngFor="let item of object | keyvalue">
 {{item.key}}:{{item.value}}
</div>

Документы: https://angular.io/api/common/KeyValuePipe

(работает для Angular 6.1 +)

EDIT:

Вы можете изменить свой объект на это: 

obj = {'0': [0, 0, 1, 0], '1-3': [1, 0, 0, 1], '4-6': [0, 0, 0, 0], '6-9': [1, 1, 1, 0]}

, а затем в html: 

<tbody>
 <tr *ngFor="let x of obj | keyvalue">
    <td>{{x.key}}</td>
    <td *ngFor="let data of x.value">{{data}}</td>
 </tr>
</tbody>

см. https://stackblitz.com/edit/angular-e3rfxt

0 голосов
/ 18 марта 2019

Вы не можете использовать итерацию, если obj не является массивом. Тем временем это будет делать, 

<tbody>
    <tr>
        <td>0</td>
        <td *ngFor="let data of obj.a">{{data}}</td>
    </tr>
    <tr>
        <td>1-3</td>
        <td *ngFor="let data of obj.b">{{data}}</td>
    </tr>
    <tr>
        <td>4-6</td>
        <td *ngFor="let data of obj.c">{{data}}</td>
    </tr>
    <tr>
        <td>6-9</td>
        <td *ngFor="let data of obj.d">{{data}}</td>
    </tr>
</tbody>
...