Angular ngx-datatable cellTemplate未加载答案

【问题标题】：Angular ngx-datatable cellTemplate not loadingAngular ngx-datatable cellTemplate未加载
【发布时间】：2017-05-11 06:51:01
【问题描述】：

我正在尝试覆盖 ngx-datatable 单元格的模板。所以在我的模板（html）文件中，我为此设置了一个小视图。为了测试模板是否有效，我只是在它周围显示值：

<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' },
    ];

只有documentation 说：

cellTemplate: TemplateRef

Angular TemplateRef 允许您创作自定义正文单元格模板

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

【问题讨论】：

标签： angular typescript datatable

【解决方案1】：

我认为您需要将列初始化移动到 ngOnInit 中，例如：

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

Plunker Example

【讨论】：

该链接不再有效 - github.com/swimlane/ngx-datatable/tree/master/demo/templates
我正在使用 ngx-datatable 的 v^17。 ngOnInit() 不是为我做的。单元格模板被忽略。将列初始化移动到 ngAfterViewInit() 使一切都神奇地工作

【解决方案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' },
    ];
  }

【讨论】：

在 ng10 中遇到同样的问题 - oninit 不起作用，但 afterviewinit 是。
相同。我尝试了很多东西，但我的单元格模板被忽略了，而 ngx-datatable 只是将原始值（没有模板）放在那里。在我将初始化移动到 ngAfterViewInit() 之后，一切都神奇地开始工作了
另一件事是一个陷阱，以防万一这有助于任何人阅读本文...确保其值为布尔值或数字的道具分配时不带引号（即 maxWidth：80，可排序：false 等）或它们也会被忽略。

【解决方案3】：

我在 Angular 7 上，我遇到了你描述的确切问题 - 在完全相同的示例代码上！正如另一个答案中所建议的，将column 人口移动到ngOnInit 对我来说没有任何区别。对我有用的是重新启动 Web 服务器 - 在我的情况下，我杀死了正在运行的 ng serve 并重新启动。听起来很奇怪，但它对我有用。看起来这是某种缓存问题。

【讨论】：

【解决方案4】：

问题是您很可能正在使用嵌套模板，因此 angular 无法获得参考。

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

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

到这里

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

【讨论】：

【解决方案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' }
    ];
}

【讨论】：