如何在 Angular 中使用 ngx-datatable / ngx-datatable-column 中的排序?

Question

我正在尝试使用ngx-datatable的排序功能来执行以下操作 链接：https://swimlane.github.io/ngx-datatable/

但是，它不起作用。

我尝试使用以下属性没有运气：

• sortable="true"
• [sortType]="'multi'"
• [sorts]="[{prop: 'id_pessoa', dir: 'asc'}]"

以下是ngx-datatable的代码和版本：

"@swimlane/ngx-datatable": "^15.0.2"
<section class="basic-elements">
<!-- Breadcrumbs -->
<nav>
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a routerLink="/">Home</a>
</li>
<li class="breadcrumb-item active">
Pessoas
</li>
</ol>
</nav>
<div id="mb-4" class="row mb-4">
<div class="col-md">
<h1 class="h2">Pessoas</h1>
</div>
<div class="col-md">
<button routerLink="novo" type="button" class="btn btn-raised btn-raised btn-success btn-no-margin float-right btn-heigh2">
+ Nova Pessoa
</button>
</div>
</div>
<div id="mb-4" class="row mb-4">
<div class="col-md-11">
<input type="text" class="form-control" id="email" >
</div>
<div class="col-md-1">
<button [disabled]="submittingForm " type="submit" class="btn btn-raised btn-raised btn-no-margin btn-primary float-right btn-heigh button-margin-top">
Buscar
</button>
</div>
</div>
<div class="row text-left">
<div class="col-md-12">
<div class="card">
<div class="card-content">
<ngx-datatable 
class="bootstrap"
[rows]="rows"
[columns]="columns"
[columnMode]="'force'"
[headerHeight]="10"
[footerHeight]="35"
[rowHeight]="35"
[externalPaging]="true"
[externalSorting]="true"
[scrollbarH]="true"
[count]="page.count"
[offset]="page.offset"
[limit]="page.limit"
[sortType]="'multi'"
[sorts]="[{prop: 'id_pessoa', dir: 'asc'}]"
(page)="pageCallback($event)">
<ngx-datatable-column name="Ações" sortable="true" prop="id_pessoa" width=140>
<ng-template let-row="data" let-value="value" ngx-datatable-cell-template>                                  
<a class="btn btn-outline-primary mr-1" [routerLink]="[value,'editar']" href="javascript:void(0)">
<i class="fa fa-edit" title="Editar"></i>
</a>
<a class="btn btn-outline-primary mr-1" [routerLink]="[value,'subst']" href="javascript:void(0)">
<i class="fa fa-exchange" title="Substituir"></i>
</a>
<a class="btn btn-outline-primary mr-1" (click)="deletePessoa(value)" href="javascript:void(0)">
<i class="fa fa-trash" title="Remover"></i>
</a>                                    
</ng-template>
</ngx-datatable-column>                                             
<!--<ngx-datatable-column name="Pré-cad." prop="pre_cadastro" width=75>
<ng-template ngx-datatable-cell-template let-value="value">
<span *ngIf="value">
<i class="fa fa-check fa-2x"></i>
</span>
<span *ngIf="!value">
-
</span>
</ng-template>
</ngx-datatable-column>-->
<ngx-datatable-column *ngFor="let col of columns" [sortable]="true" [name]="col.name" [prop]="col.prop" [width]="col.width" [headerClass]="col.headerClass" [cellClass]="col.cellClass">
</ngx-datatable-column>
<ngx-datatable-column name="Inativo" prop="inativo" width=70>
<ng-template ngx-datatable-cell-template let-value="value">
<span *ngIf="value">
<i class="fa fa-check fa-2x"></i>
</span>
<span *ngIf="!value">
-
</span>
</ng-template>
</ngx-datatable-column>

</ngx-datatable>
</div>
</div>
</div>
</div>

Answer 1

有一个名为sort的排序输出，您可以使用它并制作回调函数

(sort)="onSort($event)"

Answer 2

看起来你有[外部排序]="true"。

尝试将其更改为 false 或删除外部排序(默认为 false(。