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

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

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

stack

Answer 2

ngx-datatable的github项目中有一个封闭的问题：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>

ngx-datatable：使用headerTemplate时列无法排序？

2 个答案: