时间戳

首页 > 解决方案 > 迭代数组中的数组时出错：“找不到类型为 'object' 的不同支持对象 '[object Object]'。”

javascript - 迭代数组中的数组时出错：“找不到类型为 'object' 的不同支持对象 '[object Object]'。”

问题描述

我发现了一些类似的问题，但没有一个能帮助我解决这个问题。通过 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 中接收数据：

@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);
  }

我的 .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每个交易对手的数据时，我会犯以下错误：

错误错误：找不到类型为“对象”的不同支持对象“[对象对象]”。NgFor 仅支持绑定到 Iterables，例如 Arrays。在 NgForOf.push../node_modules/@angular/common/fesm5/common.js.NgForOf.ngOnChanges

谁能告诉我哪里出错了？

标签： javascripthtmlangulartypescript

解决方案

我找到了解决方案，只需使用 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>

推荐阅读