Angular tusharghoshbd-ngx-datatable - 错误类型错误：arr.forEach 不是函数

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 数据 [作为数据] (tuusharghoshbd-ngx-datatable.js:291)

在 Object.ngOnChangesSetInput [as setInput] (core.js:1509)

在 setInputsForProperty (core.js:10937)

在 elementPropertyInternal (core.js:9984)

在 Module.ɵɵproperty (core.js:14764)

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

在执行模板 (core.js:9579)

在 refreshView (core.js:9445)

在 refreshComponent (core.js:10616)

在 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，名称：“加拿大”}

country_id：31

名称：“尼基塔 PLC”

网站：“www.nikita.com”

我该如何解决这个问题？

谢谢。

Answer 1

问题和关注

从您的 JSON 中，data.results.company 是一个对象，而ngx-database 的[data] 预计它将接收 array 类型的数据。 p>

{
  "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];

Sample Solution on StackBlitz