Angular 7 / Typescript -Sort Wählen Sie Dropdown-Optionen in bestimmter Reihenfolge aus
Ich habe eine select dropdown
wo 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
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;
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.