CODEWITHSUNDEEP
htmlcssangular
jsbeginner
jsbeginner

Reputation: 37

*ngFor table in Angular stop condition

I have an array similar to this :

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

This is what I've done so far:

enter image description here

I want to rowspan the cells under Total and stop after 1 execution of 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 inside component :

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

How do I break out of weekly hours so it doesn't generate outside the table?

Upvotes: 1

Views: 1143

Answers (1)

NULLchimp
NULLchimp

Reputation: 775

You could simply apply an index to the *ngFor loop, like so:

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

Note that there are also other identifiers next to index. You may want to have a look at this article to get a better understanding of what you can do with *ngFor.

I hope that helps.

Upvotes: 4

Related Questions