Angular - ngx-datatable 单元格模板未填充数据

Question

在我的 Angular-12 中，我正在使用 @tusharghoshbd ngx-datatable 单元模板。

我有如下所示的组件：

组件：

ngOnInit(): void {
  this.isLoading = true;
  this.siteInfoService.getAllSiteInfo1()
    .subscribe(
      data => {
        this.allSiteInfoList = data.results.info;
        console.log(data);
      },
      error => {
        this.store.dispatch(loadErrorMessagesSuccess(error));
        this.isLoading = false;
      }
    );

  this.options = {
    loader: true
  }
  this.columns = [{
      key: 'id',
      title: '<div class="blue"><i class="fa fa-id-card-o"></i> ID</div>',
      width: 60,
      sorting: true,
      align: {
        head: 'center',
        body: 'center'
      },
      vAlign: {
        head: 'bottom',
        body: 'middle'
      },
    },
    {
      key: 'name',
      title: '<div class="blue"><i class="fa fa-user"></i> Name</div>',
      width: 100
    },
    {
      key: 'email',
      title: '<div class="blue"><i class="fa fa-phone"></i> Email</div>',
      align: {
        head: 'left'
      },
      width: 100,
      sorting: true
    },
    {
      key: 'address',
      title: '<div class="blue"><i class="fa fa-building"></i>  Address</div>',
      width: 300,
      sorting: false,
      align: {
        head: 'left',
        body: 'right'
      },
      noWrap: {
        head: true,
        body: true
      },
      cellTemplate: this.addressTpl
    },
    {
      key: 'website',
      title: '<div class="blue"><i class="fa fa-calendar-times-o"></i> Website</div>',
      width: 60,
      sorting: true,
      align: {
        head: 'center',
        body: 'center'
      }
    },
    {
      key: 'zip',
      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]="data" columns]="columns">
  <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>
                      Site Info. List
                  </b>
      </div>
      <div class="col-sm-6 col-xs-6 col-6  text-right">
        <button type="button" class="btn btn-primary">
                          <i class="fa fa-plus" aria-hidden="true"></i> Add New Data
                      </button>
      </div>
    </div>
  </ngx-caption>



  <ng-template #addressTpl let-row let-rowIndex="rowIndex" let-columnValue="columnValue">
    {{columnValue.name}}, {{columnValue.email}}
  </ng-template>
  <ng-template #actionTpl let-row let-rowIndex="rowIndex" let-columnValue="columnValue">
    <a href="javascript:void(0)" (click)="edit(row)">Edit</a> |
    <a href="javascript:void(0)" (click)="remove(rowIndex)">Delete</a>
  </ng-template>

</ngx-datatable>

我希望它填充来自 restful api 的 JSON 响应的数据，但除了 header 列标题外没有显示任何数据。

但是当我为以下内容执行控制台日志时：

console.log（数据）在

    data=>{
      this.allSiteInfoList = data.results.info;
      console.log(data);
    },

我有这个：

{
  "message": "Site Infos. Successfully Retrieved.",
  "error": false,
  "code": 200,
  "results": {
      "infos": [
          {
            "id": 1,
            "name": "Lamptey",
            "email": "example@email.com",
            "address": ddsdsdsd,
            "website": www.marlamp.com,
            "phone1": 2549099887766,
            "phone2": null,
            "phone3": null,
            "site_name": null,
            "site_logo": null,
            "site_favicon": null,
            "created_by": 0,
            "updated_by": 0,
            "created_at": null,
            "updated_at": null
          }
      ]
    }
}

我该如何解决这个问题？

谢谢

Answer 1

有一些 issues/typo 错误需要指出。

问题 1：缺少 columns]="columns"

的左方括号

site-info.component.html

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

修复问题 1：

site-info.component.html

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

---

问题 2：使用 [data]="allSiteInfoList" 而不是 [data]="data"

site-info.component.html

[data]="data"

site-info.component.ts

this.allSiteInfoList = data.results.info;

当您将值分配给 allSiteInfoList 时，您应该将数据源引用为 allSiteInfoList。

问题 2 的修复：

site-info.component.html

[data]="allSiteInfoList"

---

问题 3：使用 data.results.info 而不是 data.results.info

在您的 JSON 结果中，它显示 infos 而不是 info。发现您访问了错误的 属性 名称。

建议将响应结果的接口定义为蓝图。

{
  ...
  "results": {
      "infos": [
      ..
    ]
  }
}

site-info.component.ts

this.allSiteInfoList = data.results.info;

问题 3 的修复：

site-info.component.ts

this.allSiteInfoList = data.results.infos;

---

问题 4：分页无法正常工作（作为对 Post 所有者评论的回复）

ngx-datatable 的分页无法正常工作，出现以下错误：

1. 显示 NaN 到 NaN 的 1 个条目
2. 显示页码 1、2、3、4、5

因为您错过了 [options] 的输入 属性 绑定。

您必须添加 [options]="options" 才能使用分页。

问题 4 的修复：

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

Sample solution on StackBlitz