ngx-datatable：使用 headerTemplate 时列不可排序？

Question

Angular 8 和 ngx-datatable 16.0.2：

我已经开始使用 ngx-datatable，并且在使用 headerTemplate 时遇到了一些挑战。我的列定义是这样的：

this.columns = [
  {
    prop: 'name',
    name: 'Navn',
    headerTemplate: this.headerTpl,
    flexGrow: 3
  },
  ...
];

我的 headerTemplate 是这样声明的：

@ViewChild('headerTpl', null) headerTpl: TemplateRef<any>;

在我的 HTML 中：

  <ng-template #headerTpl let-column="column">
    <div class="column-headlines">{{ column.name }}</div>
  </ng-template>

问题是应用了 column-headlines 类的 css，但该列不可排序。当我从列定义中删除 headerTemplate: this.headerTpl 时，排序工作得很好（但样式当然是错误的）。我在这里错过了什么？

这是一个StackBlitz，我希望我的列标题已经设置样式和可排序。

这一切似乎都与模板的使用有关。一旦它开始发挥作用，其他一切都会变得混乱......

Answer 1

ngx-datatable的github项目中有一个已关闭的issue：https://github.com/swimlane/ngx-datatable/issues/1807

它说你必须在 ng-template 中添加一个let-sort="sortFn" 并在其内容中插入一个(click)="sort()"。如果您还想改变鼠标光标，可以在内容中插入class="datatable-header-cell-wrapper"。

<!-- header templates-->
<ng-template #hdrTmpl let-sort="sortFn">
    <span class="datatable-header-cell-wrapper" (click)="sort()">
        header content goes here
    </span>
</ng-template>

Answer 2

这是因为 this.headerTpl 在构造函数时尚未设置。这将在ngAfterViewInit 钩子上可用，（如果您使用{static: true}，则为ngOnInit）：

ngAfterViewInit() {
  this.columns = [{
    prop: 'name',
    name: 'Navn',
    headerTemplate: this.headerTpl
  }]
}

stack