Angular 7 - 按自定义顺序排序选择下拉选项

Question

我有一个选择下拉菜单，其中使用 *ngFor 从服务中动态获取选项。我想以我的自定义方式重新排序选项顺序。有没有可能从角码做。

The array is like this
console.log(this.paymentTypeData);
Array(5)
0: {value: "DAILY", code: "D", label: "Daily"}
1: {value: "SINGLE_TIER", code: "ST", label: "Single Tier"}
2: {value: "MULTI_TIER", code: "MT", label: "Multi Tier"}
3: {value: "NO_DISCOUNT", code: "ND", label: "No Discount"}
4: {value: "EOM", code: "EOM", label: "End of Month"}
length: 5
__proto__: Array(0)

目前他们正在查看此订单

每天 单层

多层

无折扣

月底

我想按以下顺序显示

无折扣

单层

每天

多层

月底

    HTML:
   <select
   class="form-control">
  <option *ngFor="let list of paymentTypeData" [ngValue]="list.code">
   {{list.label}}
   </option>
   </select>

   Typescript:
    public paymentTypeData: any;
     
     this.supplier.getPayTermTypes().subscribe(paymentTypes => {
     this.paymentTypeData = paymentTypes;
});

Answer 1

当然。 *ngFor 使用您给它的数组的顺序，最简单的方法是在将数组传递给*ngFor 之前对数组进行排序。

这在代码中的外观取决于您当前获取数据的方式。例如，如果你正在做

class WhateverComponent {
  selectOptions$ = this.service.fetchOptions();

  ...
}

你会添加

class WhateverComponent {
  selectOptions$ = this.service.fetchOptions().pipe(
    tap(array => {
      array.sort((x,y) => x.order - y.order)
    })
  );

  ...
}

按选项的“顺序”属性对选项进行排序，

或者如果你正在做

class WhateverComponent {
  selectOptions: Array<WhateverOption>;

  ngOnInit() {
    this.service.fetchOptions().subscribe(array => {
      this.selectOptions = array;
    })
  }
}

你可以把它改成

class WhateverComponent {
  selectOptions: Array<WhateverOption>;

  ngOnInit() {
    this.service.fetchOptions().subscribe(array => {
      array.sort((x,y) => x.order - y.order);
      this.selectOptions = array;
    })
  }
}

有关如何使用sort 的更多信息，请访问in the docs。

Answer 2

是的，您可以使用管道。

html：

<select>
  <option *ngFor="let i of items | myOrder" [value]="i">{{i.title}}</option>
</select>

模块：

@NgModule({
  declarations: [
    MyOrderPipe
  ]

组件：

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

export interface IItem {
  value: string;
  code: string;
  label: string;
  order?: number;
}

@Pipe({
  name: 'myOrder',
  pure: false,
})
export class MyOrderPipe implements PipeTransform {
  transform(array: IItem[]): IItem[] {
    if (!Array.isArray(array)) {
      return;
    }
    array = array.sort((a: IItem, b: IItem) => a.order - b.order);
    return array;
  }
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  data: IItem[]; // <-- from server
  items: IItem[]; // <-- new array with the order field

  ngOnInit() {
    const mySettings = {
      1: 'No Discount',
      2: 'Single Tier',
      3: 'Daily',
      4: 'Multi Tier',
      5: 'End of Month',
    };

    this.items = this.data.map((item: IItem) => {
      return {
        ...item,
        order: this.getKeyByValue(mySettings, item.label),
      };
    });
  }

  getKeyByValue(object, value): number {
    return Number(Object.keys(object).find((key) => object[key] === value));
  }
}