ngx-datatable 中的客户端排序 angular

Question

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

查看页面

<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>

排序失败。知道为什么会这样.. 提前致谢。

Answer 1

您的 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 }
  ];

Answer 2

如果您需要禁用 ngx-datatable 排序并仅使用客户端排序，我的代码：

<ngx-datatable
            ...
            [externalSorting] = "true"
            (sort)="onPageSorted($event)">
 </ngx-datatable>

onPageSorted($event) {
    let _sort = $event.sorts[0];
    this.filter.orderByColumnNameDESC = _sort.dir == 'desc' && _sort.prop == 'ColumnName';
    this.filter.orderByColumnNameASC = _sort.dir == 'asc' && _sort.prop == 'ColumnName';


    event.stopPropagation(); - stop auto table sort to use only from server
    event.preventDefault();
    this.performFilter(); - here your client request with this.filter params
}

ngx-datatable 中的客户端排序 angular

client side sorting in ngx-datatable angular

ngx-datatable

angular