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

我有一个如下所示的对象数组

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

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

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

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

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

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

---

谢谢：-

最简单的方法是更改阵列的结构以匹配视图中所需的结构

以下是一种改变结构的方法：

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>

---

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

以下是一种改变结构的方法：

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>

---

我认为您应该首先将数据更改为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>

---

我认为您应该首先将数据更改为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>

---

如果可能的话，改变你的JSON格式会更容易实现。如果可能的话，改变你的JSON格式会更容易实现。