Question

我的数据具有可变的列数。当我有固定的列时，可以在表中显示数据。但是，当我不知道所有列的名称时，该如何显示表中的所有数据？

我正在使用角度7。

  birds =
         [{
            "ID": "001",
            "Name": "Eurasian Collared-Dove",
            "Type": "Dove"          
        },
        {
            "ID": "002",
            "Name": "Bald Eagle",
            "Type": "Hawk"         
        },
        {
            "ID": "003",
            "Name": "Cooper's Hawk",
            "Type": "Hawk"            
        }];

代码：

                   <table *ngIf="birds">
                        <!-- ADD HEADERS -->
                        <tr>
                            <th>ID</th>
                            <th>Name of Bird</th>
                            <th>Type of Bird</th>
                        </tr>

                        <!-- BIND ARRAY TO TABLE -->
                        <tr *ngFor="let bird of birds">
                            <td>{{bird.ID}}</td>
                            <td>{{bird.Name}}</td>
                            <td>{{bird.Type}}</td>
                        </tr>
                    </table>

输出应为基于数据的表。

Answer 1

从对象获取键为 arr = Object.keys(birds[0]) ，将这些值存储在将成为数组的变量中，然后继续在表头上使用NgFor

<tr>
  <th *ngFor=" let a of arr"> {{a}} </th>
</tr>
<tr *ngFor="let bird of birds">
  <td *ngFor="let a of arr"> {{bird[a]}} //As Bryan suggested!
</tr>

如何在Angular 7中使用另一个for循环打印ID，名称或类型，而不是bird.ID或bird.Name？

1 个答案: