Question

我使用ngx-order-pipe库对表进行排序。问题在于，上下图标会更改，并且排序本身不起作用。它没有任何错误。

html：

<table class="centered highlight" *ngIf="filteredMasters.length !== 0" style="cursor: pointer">
  <thead>
    <tr>
      <th [class.active]="order === 'full_name'" (click)="setOrder('full_name')">Full Name <span [hidden]="reverse">▼</span><span [hidden]="!reverse">▲</span></th>
      <th [class.active]="order === 'date_work'" (click)="setOrder('date_work')">Date <span [hidden]="reverse">▼</span><span [hidden]="!reverse">▲</span></th>
      <th [class.active]="order === 'comment'" (click)="setOrder('comment')">Comment <span [hidden]="reverse">▼</span><span [hidden]="!reverse">▲</span></th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody >
    <tr *ngFor="let master of filteredMasters | orderBy: order:reverse">
      <td>{{master.full_name}}</td>
      <td>{{master.date_work | date: 'dd.MM.yyyy'}}</td>
      <td>{{master.comment}}</td>
      <td><a class="btn-floating btn-small waves-effect waves-light"><i class="fa fa-edit" (click)="onSelectMaster(master)"></i></a></td>
      <td><a class="btn-floating btn-small waves-effect waves-light red"><i class="fa fa-trash" (click)="deleteMaster(master)"></i></a></td>
    </tr>
  </tbody>
</table>

ts：

  order: string = 'full_name'
  reverse = false

  setOrder(order) {
    this.order = order;
    this.reverse = !this.reverse;
  }

Answer 1

请在管道中添加“ 不区分大小写”。否则，“ 全名”，“ 注释”同时具有大写和小写字母，那么您将获得两种排序方式，其中一种将获得一堆具有“小写”和“大写”方式的记录

将对字母排序，以“小写”开头，然后显示以“大写”开头的记录。 -对于DESC排序
将对字母进行排序，以“大写”开头，然后显示以“小写”开头的记录。 -对于ASC排序

更新后的代码如下。

<table class="centered highlight" *ngIf="filteredMasters.length !== 0" style="cursor: pointer">
  <thead>
    <tr>
      <th [class.active]="order === 'full_name'" (click)="setOrder('full_name')">Full Name <span [hidden]="reverse">▼</span><span [hidden]="!reverse">▲</span></th>
      <th [class.active]="order === 'date_work'" (click)="setOrder('date_work')">Date <span [hidden]="reverse">▼</span><span [hidden]="!reverse">▲</span></th>
      <th [class.active]="order === 'comment'" (click)="setOrder('comment')">Comment <span [hidden]="reverse">▼</span><span [hidden]="!reverse">▲</span></th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody >
    <tr *ngFor="let master of filteredMasters | orderBy: order:reverse:'case-insensitive'">
      <td>{{master.full_name}}</td>
      <td>{{master.date_work | date: 'dd.MM.yyyy'}}</td>
      <td>{{master.comment}}</td>
      <td><a class="btn-floating btn-small waves-effect waves-light"><i class="fa fa-edit" (click)="onSelectMaster(master)"></i></a></td>
      <td><a class="btn-floating btn-small waves-effect waves-light red"><i class="fa fa-trash" (click)="deleteMaster(master)"></i></a></td>
    </tr>
  </tbody>
</table>

表排序实现

1 个答案: