如何在角度6中基于<the></th>重复表<td></td>

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>