Angular12使用@tusharghoshbd ngx-datatable celltemplate不渲染数据如何解决？

你遇到的问题是多个低级错误共同导致的，逐一修正即可解决：

• 数据源绑定错误：HTML中ngx-datatable的[data]属性绑定的是data变量，但你组件里把接口返回的列表赋值给了allSiteInfoList，两个变量不对应，表格拿不到渲染数据
• 字段名匹配错误：返回的JSON结构里，数据数组在data.results.infos（末尾带s），但你代码里写的是data.results.info，少了后缀s，导致赋值的变量本身就是undefined
• 属性绑定语法错误：HTML中columns="columns"没有加方括号，属于静态字符串传递，不是Angular的输入属性绑定，表格无法读取你定义的列配置
• 状态位未更新：接口请求成功的回调里没有设置isLoading = false，表格会一直停留在加载状态
• 自定义模板取值错误：address列的cellTemplate里你用columnValue.name取值，但columnValue是当前行address字段对应的值，本身没有name属性，需要从行对象row里取对应字段

修正后的组件代码 #

ngOnInit(): void {
  this.isLoading = true;
  this.siteInfoService.getAllSiteInfo1()
    .subscribe(
      data => {
        // 修正字段名，同时给表格绑定的data变量赋值
        this.allSiteInfoList = data.results.infos;
        this.data = data.results.infos;
        console.log(data);
        this.isLoading = false; // 关闭加载状态
      },
      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代码 #

<!-- 修正columns的属性绑定语法，添加方括号 -->
<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>

  <!-- 修正自定义模板的取值逻辑，从row对象取字段 -->
  <ng-template #addressTpl let-row let-rowIndex="rowIndex" let-columnValue="columnValue">
    {{row.name}}, {{row.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>

内容的提问来源于stack exchange，提问作者user11352561