ngx-datatable angular中的客户端排序答案

【问题标题】：client side sorting in ngx-datatable angularngx-datatable angular中的客户端排序
【发布时间】：2022-03-31 17:34:26
【问题描述】：

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

查看页面

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

排序失败。知道为什么会发生这种情况。在此先感谢。

【问题讨论】：

标签： angular ngx-datatable

【解决方案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 }
  ];

【讨论】：

上述解决方案强制行的模型具有与列完全相同的属性。如果您在模板中派生新列（并通过行访问数据），则排序将不起作用。有没有办法在不定义列的名称（或道具）的情况下进行排序？
您可以使用prop（例如<ngx-datatable-column [prop]="'rule.name'" >）在行模型中向下钻取以获得更深层嵌套的属性，因此您的行模型不必是平面的，它可以包含对象。但它似乎无法深入到数组项。此信息可能有用。

【解决方案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
}

【讨论】：