javascript - How to use *ngFor in angular 4 to create the table with 2 columns per row - Stack Overflow

admin管理员组

文章数量:1391786

I have an array of objects like below

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

I want to use Angular *ngFor to create table like below

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

I want, two columns per row. I've tried by using *ngFor in <tr>, but didn't achieve my result. Please tell me the right way to do this.

Thank You :-)

I have an array of objects like below

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

I want to use Angular *ngFor to create table like below

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

I want, two columns per row. I've tried by using *ngFor in <tr>, but didn't achieve my result. Please tell me the right way to do this.

Thank You :-)

• javascript
• angular
• typescript

Share Improve this question Follow asked Jun 12, 2018 at 11:54 Sivakumar TadisettiSivakumar Tadisetti 5,05177 gold badges3838 silver badges6161 bronze badges 1

• If possible change your format of JSON, it would be easier to achieve then. – Pardeep Jain Commented Jun 12, 2018 at 11:59

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

The easiest would be to change the structure of the array to match the desired structure in the view.

here is a way to change the structure :

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

then you can do :

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

But if you don't want to change the array, you could try something like that :

<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>

I think you should change your data into JSON format first then you simply write this code and get the desire result.

<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>

or Either with this format you use below code as well:

<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>

本文标签： javascriptHow to use *ngFor in angular 4 to create the table with 2 columns per rowStack Overflow