Angular tusharghoshbd-ngx-datatable - ERROR TypeError: arr.f

Question

在Angular-12中，我正在实现tusharghoshbd-ngx-datatable。

我有我的API JSON端点:

{
"message": "Companies successfully Retrieved.",
"error": false,
"code": 200,
"results": {
"company": {
"id": 1,
"name": "NIKITA PLC",
"website": "www.niikita.com",
"country": {
"id": 31,
"name": "Canada",
}
}
}
}

组件:

@ViewChild('actionTpl', {
static: true
}) actionTpl!: TemplateRef < any > ;
@ViewChild('addressTpl', {
static: true
}) addressTpl!: TemplateRef < any > ;
@ViewChild('countryTpl', {
static: true
}) countryTpl!: TemplateRef < any > ;
@ViewChild('idTpl', {
static: true
}) idTpl!: TemplateRef < any > ;
panelShow = true;
options = {};
data = [];
allCompanyList: any[] = [];
company!: ICompany;
dataBK = [];
columns: any = {};
columnsWithFeatures: any
isLoading = false;
isSubmitted = false;
data1: any;
constructor(
private fb: FormBuilder,
private companyService: CompanyService,
private router: Router,
private store: Store < AppState > ,
) {}
ngOnInit(): void {
this.isLoading = true;
this.loadMyCompany();
this.loadDatatable();
}
loadMyCompany() {
this.companyService.getMyCompany().subscribe(
data => {
this.allCompanyList = data.results.company;
console.log(this.allCompanyList);
},
error => {
this.store.dispatch(loadErrorMessagesSuccess(error));
this.isLoading = false;
}
);
}
loadDatatable() {
this.columns = [{
key: 'id',
title: '<div class="blue"><i class="fa fa-id-card-o"></i> SN.</div>',
width: 60,
sorting: true,
cellTemplate: this.idTpl,
align: {
head: 'center',
body: 'center'
},
vAlign: {
head: 'bottom',
body: 'middle'
}
},
{
key: 'name',
title: '<div class="blue"><i class="fa fa-user"></i> Company</div>',
width: 100,
sorting: true,
},
{
key: 'website',
title: '<div class="blue"><i class="fa fa-envelope"></i> Website</div>',
align: {
head: 'left'
},
width: 100,
sorting: true
},
{
key: 'country',
title: '<div class="blue"><i class="fa fa-calendar"></i> Country</div>',
align: {
head: 'left'
},
width: 100,
sorting: true,
cellTemplate: this.countryTpl
},
{
key: '',
title: '<div class="blue">Action</div>',
align: {
head: 'center',
body: 'center'
},
sorting: false,
width: 80,
cellTemplate: this.actionTpl
}
];
}

HTML:

<ngx-datatable tableClass="table table-striped table-bordered table-hover" [data]="allCompanyList" [columns]="columns" [options]="options">
<ngx-caption>
<div class="row">
<div class="col-sm-6 col-xs-6 col-6 ">
<b>
<i class="fa fa-table" aria-hidden="true"></i>
{{ pageLabel }}
</b>
</div>
</div>
</ngx-caption>
<ng-template #addressTpl let-row let-rowIndex="rowIndex" let-columnValue="columnValue">
</ng-template>
<ng-template #idTpl let-rowIndex="rowIndex" let-row="row">
{{rowIndex+1}}
</ng-template>
<ng-template #countryTpl let-row let-rowIndex="rowIndex" let-columnValue="columnValue">
{{columnValue.name}}
</ng-template>
<ng-template #actionTpl let-row let-rowIndex="rowIndex" let-columnValue="columnValue">
</ng-template>
</ngx-datatable>

当我加载页面时，我得到了这个错误:

core.js:6456 ERROR TypeError: arr。forEach不是函数

在NgxDatatableComponent。Set data [as data] (tusharghoshbd-ngx-datatable.js:291)

对象。ngOnChangesSetInput [as setInput] (core.js:1509)

at setputtsforproperty (core.js:10937)

at elementPropertyInternal (core.js:9984)

模块。ɵɵ属性(core.js: 14764)

at CompanyProfileComponent_Template (company-profile.component.html:29)

at executeTemplate (core.js:9579)

at refreshView (core.js:9445)

at refreshComponent (core.js:10616)

at refreshChildComponents (core.js:9242)

然后突出显示(company-profile.component.html:29)

[data]="allCompanyList"

<ngx-datatable tableClass="table table-striped table-bordered table-hover" [data]="allCompanyList" [columns]="columns" [options]="options">

当我在组件中执行console.log(this.allCompanyList)时，我得到:

{id: 1，名称:"NIKITA PLC"，网站:"www.nikita.com"}

: {id: 31岁的名字:"Canada"

country_id: 31

name: "Nikita PLC">

网站:"www.nikita.com">

如何解决这个问题?

谢谢。

Answer 1

问题&关注

从你的JSON,data.results.company是一个对象，ngx-database的[data]期望接收到数组的数据。类型。

{
"message": "Companies successfully Retrieved.",
"error": false,
"code": 200,
"results": {
"company": {
"id": 1,
"name": "NIKITA PLC",
"website": "www.niikita.com",
"country": {
"id": 31,
"name": "Canada",
}
}
}
}

---

解决方案将data.results.company转换为数组类型

this.allCompanyList = [data.results.company];

StackBlitz的样例解决方案