如何对 Angular 中的多个字段进行排序 8

Question

我在 HTML 中有 2 个下拉菜单，即排序依据和排序依据。

Sort -   ['SKU', 'Planned', 'Actual', 'Variation', 'OR%']
Order By - ['A-Z', 'Z-A'];

在 UI 中，用户将 select 对下拉列表进行排序并按下拉列表排序，我正在根据 selected 值对数据进行排序。

我做了下面的代码，它工作正常，但我正在寻找一些常见的逻辑，如 switch case 或任何其他最小和冗余代码。

谁能帮我创建一些通用函数逻辑而不是多个 if else。

HTML代码

<mat-label>Order By:</mat-label>
            <mat-select class="mkline-input"  (selectionChange)="sortData()"  formControlName="orderBy">
                <mat-option *ngFor="let type of sortValue" [value]="type"> {{type}}
                </mat-option>
            </mat-select>
       
     
            <mat-label>Sort By :</mat-label>
            <mat-select (selectionChange)="sortData()" class="mkline-input" formControlName="sortBy">
                <mat-option *ngFor="let column of columnName" [value]="column"> {{column}}
                </mat-option>
            </mat-select>

下面是我的代码

sortData() {  
    const sort = this.orLosstreeSortingForm.controls['sortBy'].value;
    const orderBy = this.orLosstreeSortingForm.controls['orderBy'].value;
    if (sort === 'SKU' && orderBy === 'A-Z' || sort === 'SKU' && orderBy === 'Z-A') {
      const direction = orderBy === 'A-Z' ? 1 : -1;
      this.setDataResponse.factORLossTree.sort((a, b) => a.skuDescription.localeCompare(b.skuDescription) * direction);
    }
    if (sort === 'Planned' && orderBy === 'A-Z') {
      this.setDataResponse.factORLossTree.sort((a, b) => a.plannedVolume - b.plannedVolume);
    }
    else if (sort === 'Planned' && orderBy === 'Z-A') {
      this.setDataResponse.factORLossTree.sort((a, b) => b.plannedVolume - a.plannedVolume);
    }
    if (sort === 'Actual' && orderBy === 'A-Z') {
      this.setDataResponse.factORLossTree.sort((a, b) => a.actualVolume - b.actualVolume);
    }
    else if (sort === 'Actual' && orderBy === 'Z-A') {
      this.setDataResponse.factORLossTree.sort((a, b) => b.actualVolume - a.actualVolume);
    }
    if (sort === 'Variation' && orderBy === 'A-Z') {
      this.setDataResponse.factORLossTree.sort((a, b) => a.variance - b.variance);
    }
    else if (sort === 'Variation' && orderBy === 'Z-A') {
      this.setDataResponse.factORLossTree.sort((a, b) => b.variance - a.variance);
    }
}

API 回应

this.setDataResponse.factORLossTree = [
    {
        actualVolume: 6598
        or: 30.268
        plannedVolume: 26798
        skuDescription: "Blue DWLREG POUCH 20X750ML"
        variance: 15200
    },
    {
        actualVolume: 6200
        or: 13.345
        plannedVolume: 25800
        skuDescription: "Red DWLREG POUCH 20X750ML"
        variance: 16000
    },
    {
        actualVolume: 4500
        or: 22
        plannedVolume: 21798
        skuDescription: "ABC DWLREG POUCH 20X750ML"
        variance: 16500
    },
    {
        actualVolume: 2500
        or: 24.268
        plannedVolume: 22798
        skuDescription: "Test DWLREG POUCH 20X750ML"
        variance: 17000
    }
];

Answer 1

您可以创建一个新的 customSortFunction：

function customSortFunction(arr, sortField, direction){  
    return arr.sort((a,b)=>{
        if(isNaN(a[sortField])){ // compare strings
          return a[sortField].localeCompare(b[sortField]) * direction;
        }else{// compare numbers
             // you can also do a parseInt() here in case of the field value is "123"
            return (a[sortField] - b[sortField]) * direction ;
        }
    })  ; 
}

并在你的函数中调用这个函数。像这样思考：

sortData() {  
      const sort = this.orLosstreeSortingForm.controls['sortBy'].value;
      const orderBy = this.orLosstreeSortingForm.controls['orderBy'].value; 
      const direction = orderBy === 'A-Z' ? 1 : -1;
      const sortField={
        'SKU':'skuDescription', 
        'Planned':'plannedVolume', 
        'Actual':'actualVolume', 
        'Variation':'variance', 
        'OR%':'or'
      };
      const sortedArray = this.customSortFunction(
            this.setDataResponse.factORLossTree, 
            sortField[sort],
            direction);       
 }

Answer 2

**

ts代码

**

items = [
    {
      actualVolume: 1,
      skuDescription: 'A',
      variance: 15,
    },
    {
      actualVolume: 2,
      skuDescription: 'C',
      variance: 16,
    },
    {
      actualVolume: 3,
      skuDescription: 'D',
      variance: 14,
    },
    {
      actualVolume: 4,
      skuDescription: 'B',
      variance: 17,
    },
  ];
  sort = ['skuDescription', 'actualVolume', 'variance'];
  orderby = ['A-Z', 'Z-A'];
  selectedtype: string;
  selectedorder: string;
  sortdata(type, order) {
    if (order === 'A-Z') {
      this.items.sort((a, b) => 0 - (a[type] > b[type] ? -1 : 1));
    } else {
      this.items.sort((a, b) => 0 - (a[type] > b[type] ? 1 : -1));
    }
  }

**

Html代码

**

<span *ngFor="let i of items" style="display: flex">
  {{ i.skuDescription }}
</span>

<select [(ngModel)]="selectedtype">
  <option *ngFor="let type of sort">{{ type }}</option>
</select>
<select [(ngModel)]="selectedorder">
  <option *ngFor="let type of orderby">{{ type }}</option>
</select>
<button label="sort" (click)="sortdata(selectedtype, selectedorder)">
  Sort
</button>

如何对 Angular 中的多个字段进行排序 8

How to Sort multiple fields in Angular 8

javascript

sorting

typescript

angular

angular8

ts代码

Html代码