Error when iterating over array within array: “Cannot find a differ supporting object '[object Object]' of type 'object'.”

Question

I found some similar questions, but none helped me to solve this problem. Through a web api I make the following json available on an endpoint.

[
    {
        "counterparty": "JP X",
        "callback": [
            {
                "contractId": 1,
                "buy": true,
                "instrument": "PET",
                "tradeDate": "29/06/2020"
            },
            {   
                "contractId": 2,
                "buy": true,
                "instrument": "PETW"
                "tradeDate": "29/06/2020"
            }]},
     {
         "counterparty": "JP",
         "callback": [
            {
                "contractId": 12,
                "buy": true,
                "instrument": "PETR",
                "tradeDate": "29/06/2020"
            }]
   }
]

I have to organize this data in an ngx-datatable so that each line corresponds to the counterparty field and there is an ngx-datatable-row-detail where I present the information inside the callback array. After connecting to the webapi with a service, I receive the data in component.ts with the following function:

@Component({
selector: 'app-callback',
templateUrl: './callback-salesbonds.component.html',
styleUrls: ['./callback-salesbonds.component.scss']
})
export class CallbackSalesBondsComponent implements OnInit {
@ViewChild('tableWrapperList') tableWrapper;
@ViewChild('tableList') table: DatatableComponent;
currentComponentWidth;
operations: any;

constructor(private callbackService: CallbackService, 
          private ref: ChangeDetectorRef,     
          private fb: FormBuilder) 
{ 
this.filter = fb.group({
  tradeDate: new FormControl(new Date())      
});
}

public getOperations = () => {
    var operations = this.callbackService
          .SendDate(this.filter.get('tradeDate').value)
          .subscribe(source => this.operations = source);          
    }
ngAfterContentChecked(){
    if (this.table && this.table.recalculate && (this.tableWrapper.nativeElement.clientWidth !== this.currentComponentWidth)) {
      setTimeout(() => {         
        this.currentComponentWidth = this.tableWrapper.nativeElement.clientWidth;
        this.table.recalculate();
        this.ref.detectChanges();

        window.dispatchEvent(new Event('resize'));
      }, 300);
    }
  }

  toggleExpandRow(row) {
    this.table.rowDetail.toggleExpandRow(row);
  }

and my.html component looks like this:

<pg-container>
    <div class="row">
      <div class="table table-responsive mt-0">
        <div class="bg-black table-responsive collapse-border" #tableWrapperList
        ng>
        <ngx-datatable #tableList 
                    [columnMode]="'flex'"
                    [rows]="operations"
                    <ngx-datatable-row-detail [rowHeight]="150" #myDetailRow>
                      <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>
                        <table  class="table table-inline m-l-40 m-r-40 m-t-10">
                          <tr *ngFor="let r of row">
                            <td class="row-detail-td-title">contractId</td>
                            <td class="row-detail-td">{{r.callback.contractId}}</td>
                          </tr>
                          <tr *ngFor="let r of row">
                            <td class="row-detail-td-title">Buy</td>
                            <td class="row-detail-td">{{r.callback.buy}}</td>
                          </tr>
                          <tr *ngFor="let r of row">
                            <td class="row-detail-td-title">Instrument</td>
                            <td class="row-detail-td">{{r.callback.instrument}}</td>
                          </tr>
                        </table>
                      </ng-template>
                    </ngx-datatable-row-detail>
    
          
          <ngx-datatable-column [flexGrow]=5 name="Contraparte" prop="counterparty" cellClass="d-flex align-items-center text-center" headerClass="text-center">
            <ng-template let-value="value" ngx-datatable-cell-template>
              {{value}}
            </ng-template>
          </ngx-datatable-column>
          
          <ngx-datatable-column [flexGrow]="0.5" [sortable]="false" cellClass="d-flex align-items-center text-center">
            <ng-template let-row="row" let-expanded="expanded" ngx-datatable-cell-template>
              <a
                href="javascript:void(0)"
                [ngClass]="expanded ? 'fa fa-search-minus' : 'fa fa-search-plus'"
                title="Expand/Collapse Row"
                (click)="toggleExpandRow(row)"
              >
              </a>
            </ng-template>
          </ngx-datatable-column>
        </ngx-datatable>
        </div> 
      </div>
    </div>
    </pg-container>

I can bring the counterparty field to the table, but when I click to get the data within the callback for each counterparty, I make the following error:

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. at NgForOf.push../node_modules/@angular/common/fesm5/common.js.NgForOf.ngOnChanges

Could anyone tell me where I'm going wrong?

Answer 1

I found the solution, just use ngFor iterating over the callback array:

 <ngx-datatable-row-detail [rowHeight]="150" #myDetailRow>
                  <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>
                    <table  class="table table-inline m-l-40 m-r-40 m-t-10"  *ngFor="let r of row.callback">
                      <tr>
                        <td class="row-detail-td-title">contractId</td>
                        <td class="row-detail-td">{{r.contractId}}</td>
                      </tr>
                      <tr>
                        <td class="row-detail-td-title">Buy</td>
                        <td class="row-detail-td">{{r.buy}}</td>
                      </tr>
                      <tr>
                        <td class="row-detail-td-title">Instrument</td>
                        <td class="row-detail-td">{{r.instrument}}</td>
                      </tr>
                    </table>
                  </ng-template>
                </ngx-datatable-row-detail>