尝试遍历数组中的数据时如何在 HTML 中正确处理 ngFor？

Question

作为问题，我尝试遍历数组中的数据并最终显示出来。但问题是它在遍历它时显示重复的标题。

component.html

<body>
    <app-header></app-header>
    <div class="container body-content" >
        <br>
        <h2>Title</h2>
        <br>
        <div *ngFor="let group of groups">
            <table class="table">
                <tr>
                    <th>Column 1</th>
                    <th>Column 2</th>
                    <th>Column 3</th>
                    <th>Column 4</th>
                    <th>Column 5</th>
                    <th>Column 6</th>
                    <th></th>
                </tr>
                    <tr *ngFor="let types of group.Team">
                        <td *ngIf="types .ID">{{types.ID.firstColumn}}</td>
                        <td *ngIf="types .ID">{{types.ID.secondColumn}}</td>
                        <td *ngIf="types .ID">{{types.ID.thirdColumn}}</td>
                        <td *ngIf="types .ID">{{types.ID.fourthColumn}}</td>
                        <td *ngIf="types .ID">{{types.ID.fifthColumn}}</td>
                        <td *ngIf="types .ID">{{types.ID.sevenColumn}}</td>
                    </tr>
            </table>
        </div>
    </div>
</body>

View on webpage

Answer 1

您应该在迭代之外有 header 行：

        <table class="table">
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
                <th>Column 4</th>
                <th>Column 5</th>
                <th>Column 6</th>
                <th></th>
            </tr>
            <ng-container *ngFor="let group of groups">
                <tr *ngFor="let types of group.Team">
                    <td *ngIf="types .ID">{{types.ID.firstColumn}}</td>
                    <td *ngIf="types .ID">{{types.ID.secondColumn}}</td>
                    <td *ngIf="types .ID">{{types.ID.thirdColumn}}</td>
                    <td *ngIf="types .ID">{{types.ID.fourthColumn}}</td>
                    <td *ngIf="types .ID">{{types.ID.fifthColumn}}</td>
                    <td *ngIf="types .ID">{{types.ID.sevenColumn}}</td>
                </tr>
            </ng-container>
        </table>

尝试遍历数组中的数据时如何在 HTML 中正确处理 ngFor？

How to handle ngFor properly in HTML when try too iterate throught data in an array?

html

angular

angular9