Angular ngx-datatable cellTemplate未加载

Question

我正在尝试覆盖ngx-datatable单元格的模板.所以在我的模板中,我为此设置了一个小视图.要测试模板是否有效,我只是在它周围显示值:

<ngx-datatable
    class="material"
    [rows]="rows"
    [columns]="columns"
    headerHeight="45">
</ngx-datatable>
<ng-template #roleTemplate let-row="row" let-value="value" let-i="index">
  <strong> **{{ value }}** </strong>
</ng-template>

在我的组件中,我使用ViewChild获取模板并将其提供给我的数据表. @ViewChild('roleTemplate') roleTemplate: TemplateRef<any>;

public columns = [
        { name: 'Name', prop: 'displayName' },
        { name: 'Email', prop: 'emailAddress' },
        { name: 'Role', prop: 'role', cellTemplate: this.roleTemplate },
        { name: 'Status', prop: 'status' },
    ];

只有文件说:

cellTemplate:TemplateRef

Angular TemplateRef允许您创作自定义的身体细胞模板

但它似乎不起作用.我错过了什么吗？

Answer 1

我认为您需要将列初始化移动到ngOnInit:

ngOnInit() {
  this.columns = [
    { name: 'Name', prop: 'displayName' },
    { name: 'Email', prop: 'emailAddress' },
    { name: 'Role', prop: 'role', cellTemplate: this.roleTemplate },
  ];
}

Plunker示例

另请参见此处的更多示例

• https://github.com/swimlane/ngx-datatable/tree/master/demo/templates

Answer 2

你必须在里面初始化你的列ngAfterViewInit。我遇到了同样的问题，我意识到templateRef即使我初始化了里面的列也是未定义的ngOnInit。所以我将列初始化移到了ngAfterViewInit，效果很好。就像在 Angular 9 中一样：

import { ... AfterViewInit } from '@angular/core';

ngAfterViewInit() {
    this.columns = [
        { name: 'Name', prop: 'displayName' },
        { name: 'Email', prop: 'emailAddress' },
        { name: 'Role', prop: 'role', cellTemplate: this.roleTemplate },
        { name: 'Status', prop: 'status' },
    ];
  }