Angular 7 / Typescript -Sort Wybierz rozwijane opcje w określonej kolejności

Question

Mam miejsce, w select dropdownktórym opcje są pobierane z usługi dynamicznie przy użyciu *ngFor. Chcę zmienić kolejność opcji w mój niestandardowy sposób. Czy można to zrobić z kodu kątowego? Tablica jest taka

   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)

Obecnie wyglądają w tej kolejności

• Codziennie
• Pojedynczy poziom
• Multi Tier
• Bez rabatu
• Koniec miesiąca

Ale chcę wyświetlić w poniższej kolejności:

• Bez rabatu
• Pojedynczy poziom
• Codziennie
• Multi Tier
• Koniec miesiąca

HTML:

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

Maszynopis:

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

Answer 1

Sugerowałbym dodanie właściwości sortOrder w paymentTypes, a następnie, gdy pobierzesz swoje paymentTypes, możesz je posortować według określonego zamówienia.

this.paymentTypeData.sort((a,b) => a.sortOrder > b.sortOder ? -1 : 1;

Answer 2

Powiedziałbym, że rozwiązanie Lotte Lemmens polegające na dodaniu sortOrder na zapleczu byłoby idealne, a nie dodawanie go w front-endzie.

Jeśli jednak nie możesz zmienić zaplecza, możesz wprowadzić tabelę przeglądową zdefiniowaną w interfejsie użytkownika, aby określić kolejność sortowania.

Zdefiniuj każdy klucz w swojej tabeli na wartość właściwości, według której chcesz sortować. W tym przypadku „wartość”:

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

Teraz dostosuj każdą konkretną wartość, aby odzwierciedlić żądaną kolejność sortowania.

Na koniec dodaj potok do swojego żądania w swoim, .tsaby wykonać sortowanie:

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

Uwaga: Jest to kruchy projekt, ponieważ opiera się na nazwie właściwości obiektu odpowiedzi z serwera, która nie zmienia się w celu dopasowania wartości właściwości do tabeli porządku sortowania.