如何通过单击标题（ngx-datatable）来开发可排序的列？

Question

如何通过点击表头来开发可排序列？

我正在尝试按照文档中的方式进行操作，但它不起作用。

 <ngx-datatable
    #table
    ...
    [rows]='vendors'>

    <ngx-datatable-column name="VENDOR" [flexGrow]="1">
      <ng-template let-column="column" let-sort="sortFn" let-sortDir="sortDir">
        <span (click)="sort($event, sortDir, sortFn)">{{column.name}}</span>
      </ng-template>
      <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
        <div class="vendor-name">{{row.vendorName}}</div>
      </ng-template>
    </ngx-datatable-column>

Answer 1

如果您使用 ng-template 定义列标题，则排序不起作用。仅当您创建了仅具有 ngx-datatable-cell-template 属性的基本列时，默认排序才有效。

这行得通：

  <ngx-datatable-column name="Navn" prop="name" [flexGrow]="3">
    <ng-template let-value="value" ngx-datatable-cell-template>
      <span [attr.aria-label]="value">{{ value }}</span>
    </ng-template>
  </ngx-datatable-column>

这不是：

  <!-- Name -->
  <ngx-datatable-column name="Navn" prop="name" [flexGrow]="3">
    <ng-template let-column="column" ngx-datatable-header-template>
      <span aria-label="Name">{{ column.name }}</span>
    </ng-template>

    <ng-template let-value="value" ngx-datatable-cell-template>
      <span [attr.aria-label]="value">{{ value }}</span>
    </ng-template>
  </ngx-datatable-column>

Answer 2

首先，ngx-datatable 默认支持排序。不要将任何参数传递给排序函数。这不是必需的。这样做：

<ngx-datatable-column name="VENDOR" [flexGrow]="1" [sortable]="true">