Angular 7 / Typescript -SortSelectドロップダウンオプションを特定の順序で

Nov 26 2020

を使用してselect dropdownオプションがサービスから動的にフェッチされるwhereがあります*ngForオプションの順序をカスタムの方法で並べ替えたい。角度コードから行うことは可能ですか?配列はこんな感じ

   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;
});

回答

LotteLemmens Nov 26 2020 at 09:07

PaymentTypesにsortOrderプロパティを追加することをお勧めします。そうすれば、paymentTypesを取得するときに、指定した順序で並べ替えることができます。

this.paymentTypeData.sort((a,b) => a.sortOrder > b.sortOder ? -1 : 1;
MikkelChristensen Nov 26 2020 at 10:37

フロントエンドにsortOrderを追加するよりも、バックエンドにsortOrderを追加するロッテレメンスのソリューションが理想的だと思います。

ただし、バックエンドを変更できない場合は、フロントエンドで定義されたルックアップテーブルを導入して、並べ替え順序を決定できます。

テーブル内の各キーを、並べ替えるプロパティの値に定義します。この場合の「値」:

const sortOrderTable = {
  "DAILY": 0,
  "SINGLE_TIER": 0,
  "MULTI_TIER": 0,
  "NO_DISCOUNT": 0,
  "EOM": 0
}

次に、特定の各値を調整して、目的の並べ替え順序を反映します。

最後に、リクエストにパイプを追加.tsして、並べ替えを実行します。

this.supplier.getPayTermTypes()
  .pipe(
    map(apiResponse => apiResponse.sort((a,b) => sortOrderTable[a.value] > sortOrderTable[b.value] ? -1 : 1)))
  .subscribe(paymentTypes => {this.paymentTypeData=paymentTypes;});

注意:これは、プロパティ値をソート順テーブルに一致させるためにサーバーからの応答オブジェクトのプロパティ名に依存して変更されないため、脆弱な設計です。