如何在角度 4 中使用 *ngFor 创建每行 2 列的表

Question

我有一个像下面这样的对象数组

let columns = [
    {id: 1, columnName: 'Column 1'}, 
    {id: 2, columnName: 'Column 2'}, 
    {id: 3, columnName: 'Column 3'}, 
    {id: 4, columnName: 'Column 4'}
];

我想使用 Angular *ngFor 创建如下表

<table>
    <tr>
        <td>Column 1</td>
        <td>Column 2</td>
    </tr>
    <tr>
        <td>Column 3</td>
        <td>Column 4</td>
    </tr>
</table>

我想要，每行两列。我试过在 *ngFor 中使用<tr>，但没有达到我的结果。请告诉我正确的方法来做到这一点。

谢谢你 ：-）

Answer 1

最简单的方法是更改​​数组的结构以匹配视图中所需的结构。

这是一种改变结构的方法：

tableData = columns.reduce((acc, col, i) => {
    if (i % 2 == 0) {
        acc.push({column1: col});
    } else {
        acc[acc.length - 1].column2 = col;
    }       
    return acc;
}, []);

那么你可以这样做：

<table>
    <tr *ngFor="let row of tableData">
        <td>{{row.column1.columnName}}</td>
        <td>{{row.column2.columnName}}</td>
    </tr>
</table>

但是如果你不想改变数组，你可以尝试这样的事情：

<table>
    <ng-container *ngFor="let col of columns; let i = index">
        <tr *ngIf="i % 2 == 0">
            <td>{{col.columnName}}</td>
            <td>{{i < columns.length - 1 ? columns[i + 1].columnName : ""}}</td>
        </tr>
    </ng-container>
</table>