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

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

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

Answer 2

如果使用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>

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

2 个答案: