[英]Error when iterating over array within array: “Cannot find a differ supporting object '[object Object]' of type 'object'.”
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.
通过 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"
}]
}
]
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.我必须在
ngx-datatable
中组织这些数据,以便每一行对应于counterparty
字段,并且有一个ngx-datatable-row-detail
我在callback
数组中显示信息。 After connecting to the webapi with a service, I receive the data in component.ts with the following function:使用服务连接到 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);
}
and my.html component looks like this: 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>
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:我可以将
counterparty
字段带到表中,但是当我单击以获取每个交易对手的callback
中的数据时,我会出现以下错误:
ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'.
错误 错误:找不到支持“对象”类型的 object“[对象对象]”的不同。 NgFor only supports binding to Iterables such as Arrays.
NgFor 仅支持绑定到 Iterables,例如 Arrays。 at NgForOf.push../node_modules/@angular/common/fesm5/common.js.NgForOf.ngOnChanges
在 NgForOf.push../node_modules/@angular/common/fesm5/common.js.NgForOf.ngOnChanges
Could anyone tell me where I'm going wrong?谁能告诉我哪里出错了?
I found the solution, just use ngFor iterating over the callback array:我找到了解决方案,只需使用 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.