如何基于Angular6重复表

Question

我有这两个数组

valuesArray=[{name:"abc",num:"111",status:"available"},
             {name:"def",num:"222",status:"available"},
             {name:"ghi",num:"333",ststus:"offiline"}]    
headerArray=[{headerName:"name"},{headerName:"num"}]

，我想通过*ngFor与我的标头数组匹配来使用tds构造表。 请帮我解决这个问题。 预先感谢。

Answer 1

尝试一下

<table>
    <thead>
        <tr>
            <!-- Iterate over headers -->
            <th scope="col" *ngFor="let header of headerArray;">
                 {{header.headerName}}
            </th>
        </tr>
    </thead>
    <tbody>
        <!-- Iterate over value rows -->
        <tr *ngFor="let valueRow of valuesArray">
            <!-- Iterate over headers -->
            <td *ngFor="let header of headerArray">
                <!-- Get required value by header as key -->
                {{valueRow[header.headerName]}}
            </td>
        </tr>
    </tbody>
</table>