* 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旁边还有其他标识符。您可能想看看this article，以便更好地了解使用*ngFor可以做什么。

我希望有帮助。