Angular 7 / Typescript -Sort Wählen Sie Dropdown-Optionen in bestimmter Reihenfolge aus

Nov 26 2020

Ich habe eine select dropdownwo Optionen werden dynamisch aus dem Dienst abgerufen *ngFor. Ich möchte die Reihenfolge der Option auf meine benutzerdefinierte Weise neu anordnen . Ist es möglich, aus Winkelcode zu tun?. Das Array ist wie folgt

   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)

Derzeit sehen sie in dieser Reihenfolge

  • Täglich
  • Single Tier
  • Multi Tier
  • Kein Rabatt
  • Ende des Monats

Aber ich möchte in der folgenden Reihenfolge anzeigen:

  • Kein Rabatt
  • Single Tier
  • Täglich
  • Multi Tier
  • Ende des Monats

HTML:

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

Typoskript:

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

Antworten

LotteLemmens Nov 26 2020 at 09:07

Ich würde vorschlagen, eine sortOrder-Eigenschaft in Ihre Zahlungstypen aufzunehmen. Wenn Sie dann Ihre Zahlungstypen abrufen, können Sie diese nach der angegebenen Reihenfolge sortieren.

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

Ich würde sagen, dass Lotte Lemmens Lösung, eine sortOrder im Back-End hinzuzufügen, ideal wäre, anstatt sie im Front-End hinzuzufügen.

Wenn Sie das Back-End jedoch nicht ändern können, können Sie eine im Front-End definierte Nachschlagetabelle einführen, um Ihre Sortierreihenfolge zu bestimmen.

Definieren Sie jeden Schlüssel in Ihrer Tabelle auf den Wert der Eigenschaft, nach der Sie sortieren möchten. In diesem Fall "Wert":

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

Passen Sie nun jeden bestimmten Wert an Ihre gewünschte Sortierreihenfolge an.

Fügen Sie abschließend Ihrer Anfrage eine Pipe hinzu .ts, um die Sortierung durchzuführen:

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

Hinweis: Dies ist ein sprödes Design, da der Eigenschaftsname des Antwortobjekts von Ihrem Server nicht geändert werden muss, um die Eigenschaftswerte mit der Sortierreihenfolgetabelle abzugleichen.