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>

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

谢谢： - ）

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>

Answer 2

我认为您应该首先将数据更改为JSON格式，然后您只需编写此代码并获得所需结果。

<table class='table' *ngIf="forecasts">
<thead>
    <tr>
        <th>Temp. (C)</th>
        <th>Temp. (F)</th>
    </tr>
</thead>
<tbody>
    <tr *ngFor="let forecast of forecasts">
        <td>{{ forecast.temperatureC }}</td>
        <td>{{ forecast.temperatureF }}</td>
    </tr>
</tbody>
</table>

或使用此格式您也可以使用以下代码：

<table>
<tbody *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>
</tbody>
</table>

如何在angular 4中使用* ngFor来创建每行2列的表格

2 个答案: