Question

我正在尝试覆盖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' },
    ];

只有documentation说的话：

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 Example

另见此处的更多示例

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

Answer 2

我使用的是Angular 7，我遇到了您所描述的确切问题-使用完全相同的示例代码！正如另一个答案所建议的那样，将column人口迁移到ngOnInit对我没有任何影响。对我起作用的是重新启动了Web服务器-就我而言，我杀死了正在运行的ng serve并重新启动了。看起来这是某种缓存问题。

Answer 3

您必须在ngAfterViewInit中初始化列。我遇到了同样的问题，即使我初始化了templateRef中的列，我也意识到ngOnInit是未定义的。因此，我将列初始化移至ngAfterViewInit，它的工作非常好。

Answer 4

问题是您很可能使用了嵌套模板，因此 angular 无法获得引用。

所以从这里移动您的列模板

<ng-template #someParent>
  <ng-template #columnXYZ></ng-template>
</ng-template>

到这里

<ng-template #someParent></ng-template>
<ng-template #columnXYZ></ng-template>

Answer 5

您在这里存在初始化和在一行中分配变量的问题

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

您需要像这样将初始化和分配放到不同的行

columns: any[];


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

Angular ngx-datatable cellTemplate未加载

5 个答案: