* ngFor表在Angular停止條件下

Question

我有一個類似於這樣的數組：

tableData = [
{claimId: "C.24NNT.001.001", MON: "8h", WED: "3h10m ", FRI: "5h20m "},
{claimId: "unspecified", TUE: "8h", WED: "4h50m ", FRI: "2h40m "},
{claimId: "C.24NNT.005.001", THU: "8h"},]

到目前為止，這是我所做的：

我想對Total下的單元格進行行跨度，並在執行ngFor 1次后停止。

HTML：

 <table> <thead class="header"> <th>WBS.ELEMENT</th> <th *ngFor="let day of tableHeader">{{day}}</th> <th>TOTAL</th> </thead> <tbody class="body"> <tr *ngFor="let row of tableData"> <td> {{row.claimId}} </td> <td *ngFor="let day of tableHeader">{{row[day]}}</td> <td [attr.rowspan]="tableData.length">{{weeklyHours}}</td> </tr> </tbody> </table> 

tableHeader內部組件：

tableHeader: string[] = ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN']; 

我該如何每周休息幾小時，使其不會在桌子外產生？

Answer 1

您可以簡單地將索引應用於*ngFor循環，如下所示：

<tr *ngFor = "let row of tableData; let i = index">
    <td>
        {{row.claimId}}
    </td>
    <td *ngFor="let day of tableHeader">{{row[day]}}</td>
    <td *ngIf="i === 0" [attr.rowspan]="tableData.length">{{weeklyHours}}</td>
</tr>

請注意， index旁邊還有其他標識符。 您可能想看一下這篇文章 ，以更好地了解*ngFor可以做什么。

希望對您有所幫助。