ngx-datatable angular 中的客户端排序

如何解决ngx-datatable angular 中的客户端排序

如果我们指定如下所示的列，则客户端排序有效。

查看页面

<ngx-datatable class="material" [rows]="rows" [columns]="columns"> </ngx-datatable>

ts 页面

columns = [{ prop: 'name' },{ name: 'Gender' },{ name: 'Company' }];

但是如果我们从 ts 页面中删除列定义，然后在视图页面中将它们指定为

<ngx-datatable class="material" [rows]="rows">
    <ngx-datatable-column>
      <ng-template ngx-datatable-header-template>
        <span>name</span>
      </ng-template>
      <ng-template let-row="row" ngx-datatable-cell-template>
        {{row.name }}
      </ng-template>
  </ngx-datatable-column>
  <ngx-datatable-column>
    <ng-template ngx-datatable-header-template>
      <span>Gender</span>
    </ng-template>
    <ng-template let-row="row" ngx-datatable-cell-template>
      {{row.Gender}}
    </ng-template>
</ngx-datatable-column>
<ngx-datatable-column>
  <ng-template ngx-datatable-header-template>
    <span>Company</span>
  </ng-template>
  <ng-template let-row="row" ngx-datatable-cell-template>
    {{row.Company}}
  </ng-template>
</ngx-datatable-column>
  </ngx-datatable>

排序失败。 知道为什么会发生这种情况.. 提前致谢。

解决方法

您的 HTML 模板似乎有问题。这对没有列定义的我有用。

<ngx-datatable [rows]="rows">

  <ngx-datatable-column name="name">
    <ng-template let-row="row" ngx-datatable-cell-template>
      {{row.name}}
    </ng-template>
  </ngx-datatable-column>

  <ngx-datatable-column name="company">
    <ng-template let-row="row" ngx-datatable-cell-template>
      {{row.company}}
    </ng-template>
  </ngx-datatable-column>

</ngx-datatable>

同样，我们可以使用这些方式进行排序。

<ngx-datatable class="material" [rows]="rows" [sorts]="[{prop: 'name',dir: 'desc'}]">

,

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

或

  columns = [
    { name: 'company',sortable: true },{ name: 'name',sortable: false }
  ];