How to bind a table tr and td with an object array in angular 11

Question

I am trying to generate a table using array list. I want to generate TR and TD based on the below data. when I have one data its working as expected with adding one ngfor in TR property. I want to repeat both TR and TD based on the API result. Here is the code sample I have tried.

<table class="table align-items-center table-dark table-flush">
<tbody>
<tr class="col-sm-12 col-md-12 col-lg-12 col-xl-12" *ngFor="let Item of BitData;">
  <td class="pad1" *ngFor="let dataItem of Item;">
    <div class="media align-items-center">
      <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 pad1">
        <div class="card card-stats mb-4 mb-xl-0 bg-gradient-info">
          <div class="card-body">
            <div class="row border">
              <div
                [ngClass]="dataItem.PLANNED_HOLE_SECTION == dataItem.ACTUAL_HOLE_SECTION ? 'col bg-gradient-success' : 'col bg-gradient-warning'">
                <h5 class="h5 card-title text-white mb-0 font-sm">Hole Size</h5>
                <h5 class="h5 font-weight-bold font-md">{{dataItem.PLANNED_HOLE_SECTION}}</h5>
              </div>
              <div
                [ngClass]="dataItem.PLANNED_HOLE_SECTION == dataItem.ACTUAL_HOLE_SECTION ? 'col bg-gradient-success' : 'col bg-gradient-warning'">
                <h5 class="h5 card-title text-white mb-0 font-sm">Hole Size</h5>
                <h5 class="h5 font-weight-bold font-md">{{dataItem.ACTUAL_HOLE_SECTION}}</h5>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    </div>
  </td>
</tr>
</tbody>
</table>

and this is the API response data

I am expecting the Table1 in first row, Table2 in second row etc. I am getting an error in console like Error trying to diff '[object Object]'. Only arrays and iterables are allowed. I am new to angular, any help on this highly appreciated.

score 0 · Answer 1 · answered May 24 '21 at 07:51

0

I think this link can help you: .

Showing array of object in mat table

answered May 24 '21 at 07:51

Elham Dabiri

435
2
9

I am not using Material design – Jzl May 24 '21 at 08:27

score 0 · Answer 2 · answered May 24 '21 at 08:31

After my research I found keyvalue pipes in detailes here and its solved my problem. Below is my solution, may help others in future.

<table class="table align-items-center table-dark table-flush">
 <tbody>
 <tr class="col-sm-12 col-md-12 col-lg-12 col-xl-12" *ngFor="let item of BitData | keyvalue">
   <td class="pad1" *ngFor="let dataItem of item.value | keyvalue">
    <div class="media align-items-center">
      <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 pad1">
        <div class="card card-stats mb-4 mb-xl-0 bg-gradient-info">
          <div class="card-body">
            <div class="row border">
              <div
                [ngClass]="dataItem.value.PLANNED_HOLE_SECTION == dataItem.value.ACTUAL_HOLE_SECTION ? 'col bg-gradient-success' : 'col bg-gradient-warning'">
                <h5 class="h5 card-title text-white mb-0 font-sm">Hole Size</h5>
                <h5 class="h5 font-weight-bold font-md">{{dataItem.value.PLANNED_HOLE_SECTION}}</h5>
              </div>
              <div
                [ngClass]="dataItem.value.PLANNED_HOLE_SECTION == dataItem.value.ACTUAL_HOLE_SECTION ? 'col bg-gradient-success' : 'col bg-gradient-warning'">
                <h5 class="h5 card-title text-white mb-0 font-sm">Hole Size</h5>
                <h5 class="h5 font-weight-bold font-md">{{dataItem.value.ACTUAL_HOLE_SECTION}}</h5>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </td>
</tr>
</tbody>
</table>

How to bind a table tr and td with an object array in angular 11

2 Answers2