* ngДля таблицы в состоянии угловой остановки

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"},]

Это то, что я сделал до сих пор:

Я хочу, чтобы строки в ячейках в поле Всего и остановились после 1 выполнения ngFor.

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.

Надеюсь, это поможет.