使用向上/向下 img 以角度对自定义管道进行排序，默认情况下使用 img (-) 箭头对 Res List(-) 进行排序

如何解决使用向上/向下 img 以角度对自定义管道进行排序，默认情况下使用 img (-) 箭头对 Res List(-) 进行排序

我想实现 img 用于通过自定义管道按所有字段对表进行排序。如果我只使用 Asc 和 Desc 管道，它可以正常工作，但是当我添加 (-) for 而不进行排序时，它无法正常工作。

默认情况下使用按钮图像破折号获取 API 响应，但是当我将其升序更改时，它第一次获取 sortValue 管道破折号，因此当我第一次单击时它不起作用，但是当我第二次单击降序时，它得到了完美的结果.. html:

<div class= "row">
    <div class="col-md-2">
    <input
      [(ngModel)]="name"
      class="form-control"
      placeholder=" name"
    />
    <button
      class="filter-down-arrow"
      (click)="changeOrder(sortIconLabel,'label')"
    >
      <img *ngIf="expression" src="assets/images/arrow-{{sortIconLabel }}.png"/>
    </button>
  </div>

  <div class="col-md-2">
    <input
      class="form-control"
      [(ngModel)]="location"
      placeholder="Location"
    />
    <button
      class="filter-down-arrow"
      (click)="changeOrder(sortIconlocation,'locations')"
    >
      <img src="assets/images/arrow-{{ sortIconlocation }}.png" />
    </button>
  </div>
</div>

    <nb-card
  *ngFor="
    let area of lstUser
      | sortOrder: sortOrderBy:sortValue:'label';
    let i = index
  "
>
  <nb-card-body class="p-0">
    <div class="row m-0">
      <div class="col-md-1 pl-1 pr-0 align-self-center">
        <div class="area-image mx-auto"></div>
      </div>
      <div class="col-md-2 mt-4">
        <label class="label d-block">{{ content.zone }}</label
        ><strong>{{ area.label }}</strong>
      </div>
      <div class="col-md-1 mt-4">
        <label class="label d-block">{{ content.locations }}</label
        ><strong>{{ area.location_count | number }}</strong>
      </div>
    </div>
  </nb-card-body>
</nb-card>

Ts

sortIconLabel: any = "dash";
sortValue: any;
sortIconlocation: any = "dash";
sortOrderBy: any;


changeOrder(field,field_value): void {
 
  this.sortOrderBy = field;
  this.sortValue = field_value;

if (field_value == "label") {
  this.sortIconLabel = this.sortIconLabel == "asc" ? "desc" : "asc";
}

  if (field_value == "locations") {
    this.sortIconlocation= this.sortIconlocation== "asc" ? "desc" : "asc";
  }
}

自定义管道

import { Injectable,Pipe,PipeTransform } from '@angular/core';

export type SortOrder = 'asc' | 'desc' | 'dash';

  @Injectable()
  @Pipe({
   name: 'sortOrder',})
export class SortpipeDirective implements PipeTransform {
      transform(value: any[],sortOrder: SortOrder | string = 'asc',sortKey?: string): any {
      sortOrder = sortOrder && (sortOrder.toLowerCase() as any);

     if (!value || (sortOrder === 'dash' )) return value;

     let numberArray = [];
     let stringArray = [];

     if (!sortKey) {
       numberArray = value.filter(item => typeof item === 'number').sort();
       stringArray = value.filter(item => typeof item === 'string').sort();
    } else {
    numberArray = value.filter(item => typeof item[sortKey] === 'number').sort((a,b) => a[sortKey] - b[sortKey]);
    stringArray = value
     .filter(item => typeof item[sortKey] === 'string')
     .sort((a,b) => {
       if (a[sortKey] < b[sortKey]) return -1;
       else if (a[sortKey] > b[sortKey]) return 1;
       else return 0;
     });
  }
  const sorted = [
   ...numberArray,...stringArray,...value.filter(
     item =>
       typeof (sortKey ? item[sortKey] : item) !== 'number' &&
       typeof (sortKey ? item[sortKey] : item) !== 'string',),];
   return sortOrder === 'asc' ? sorted : sorted.reverse();
  }
}