Question 359906 in Html Question posted in
Some basic documentation can be found here.

Html – ngFor for dynamically table does not work

Im using HTML and Angular (ts)
I tried to obtain something like this dynamically because the length of data can change and i dont want to use innerHTML :

ListAverage1 ListAverage2
1 12
2 13
3 14
4 15
5 16
6 17
7 18
8 19

From this object:

let average = { "listAverage1": [1,2,3,4,5,6,7,8], "listAverage2": [12,13,14,15,16,17,18,19] }

I tried this but nothing appeared in my table:

<table class="table table-hover table-bordered">
    <ng-container matColumnDef="average1">
      <th class="large8" mat-mdc-header-cell *matHeaderCellDef> ListAverage1 </th>
      <tr *ngFor = "let average of this.listAverage.listAverage1">
        <td>average</td>
      </tr>
    </ng-container>

    <ng-container matColumnDef="average2">
      <th class="large8" mat-mdc-header-cell *matHeaderCellDef> ListAverage2 </th>
      <tr *ngFor = "let average2 of this.listAverage.listAverage2">
        <td>average2</td>
      </tr>
    </ng-container>
</table>

Thanks for your help

Tags:

2

Answers


  1. 0

    You are not printing the result of the variable.
    Should be like this

    <table class="table table-hover table-bordered">
<ng-container matColumnDef="average1">
  <th class="large8" mat-mdc-header-cell *matHeaderCellDef> ListAverage1 </th>
   <tr *ngFor="let value of average.listAverage1">
     <td>{{ value }}</td>
   </tr>
</ng-container>

<ng-container matColumnDef="average2">
  <th class="large8" mat-mdc-header-cell *matHeaderCellDef> ListAverage2 </th>
  <tr *ngFor="let value of average.listAverage2">
    <td>{{ value }}</td>
  </tr>
</ng-container>
    Login or Signup to reply.
  2. 0 
    <table class="table table-hover table-bordered">
  <thead>
    <tr>
      <th class="large8">listAverage1</th>
      <th class="large8">listAverage2</th>
    </tr>
  </thead>
  <tbody>
    <ng-container *ngIf="average.listAverage1.length === average.listAverage2.length; else lengthMismatch">
      <ng-container *ngFor="let item of average.listAverage1; let i = index">
        <tr>
          <td>{{ average.listAverage1[i] }}</td>
          <td>{{ average.listAverage2[i] }}</td>
        </tr>
      </ng-container>
    </ng-container>
    <ng-template #lengthMismatch>
      <tr>
        <td colspan="2">Arrays are of different lengths.</td>
      </tr>
    </ng-template>
  </tbody>
</table>

    please check stackBlitz

    Demo

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search