迭代數組中的數組時出錯：“找不到支持 object '[object Object]' 類型為 'object' 的不同。”

Question

我發現了一些類似的問題，但沒有一個能幫助我解決這個問題。 通過 web api 我使以下 json 在端點上可用。

[
    {
        "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"
            }]
   }
]

我必須在ngx-datatable中組織這些數據，以便每一行對應於counterparty字段，並且有一個ngx-datatable-row-detail我在callback數組中顯示信息。 使用服務連接到 webapi 后，我在 component.ts 中收到數據，其中包含以下 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);
  }

my.html 組件如下所示：

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

我可以將counterparty字段帶到表中，但是當我單擊以獲取每個交易對手的callback中的數據時，我會出現以下錯誤：

錯誤 錯誤：找不到支持“對象”類型的 object“[對象對象]”的不同。 NgFor 僅支持綁定到 Iterables，例如 Arrays。 在 NgForOf.push../node_modules/@angular/common/fesm5/common.js.NgForOf.ngOnChanges

誰能告訴我哪里出錯了？

Answer 1

我找到了解決方案，只需使用 ngFor 遍歷回調數組：

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