Angular - ngx-datatable celltemplate 不填充数据

如何解决Angular - ngx-datatable celltemplate 不填充数据

在我的 Angular-12 中，我使用的是 @tusharghoshbd ngx-datatable celltemplate。

我有如下所示的组件：

组件：

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>',body: 'center'
      }
    },{
      key: 'zip',title: '<div class="blue">Action</div>',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 响应中填充数据，但除了列标题标题之外没有显示任何数据。

但是当我执行控制台日志时：

console.log(data) in

    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": "[e-mail]","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
          }
      ]
    }
}

我该如何解决这个问题？

谢谢

解决方法

有一些问题/拼写错误需要指出。

问题 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：分页无法正常工作（作为对帖子所有者评论的回复）

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

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

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

您必须添加 [options]="options" 才能进行分页。

修复问题 4：

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

Sample solution on StackBlitz