Angular 7 / Typescript -Sort Sélectionnez les options déroulantes dans un ordre particulier
J'ai un select dropdown
où les options sont récupérées du service de manière dynamique en utilisant *ngFor
. Je souhaite réorganiser l'ordre de l'option de ma manière personnalisée. Est-il possible de faire du code angulaire ?. Le tableau est comme ça
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)
Actuellement, ils regardent dans cet ordre
- du quotidien
- Niveau unique
- Multi Tier
- Pas de rabais
- Fin du mois
Mais je veux afficher dans l'ordre ci-dessous:
- Pas de rabais
- Niveau unique
- du quotidien
- Multi Tier
- Fin du mois
HTML:
<select
class="form-control">
<option *ngFor="let list of paymentTypeData" [ngValue]="list.code">
{{list.label}}
</option>
</select>
Manuscrit:
public paymentTypeData: any;
this.supplier.getPayTermTypes().subscribe(paymentTypes => {
this.paymentTypeData = paymentTypes;
});
Réponses
Je suggère d'ajouter une propriété sortOrder dans vos paymentTypes, puis lorsque vous récupérez vos paymentTypes, vous pouvez les trier sur cet ordre spécifié.
this.paymentTypeData.sort((a,b) => a.sortOrder > b.sortOder ? -1 : 1;
Je dirais que la solution Lotte Lemmens consistant à ajouter un sortOrder sur le back-end serait idéale plutôt que de l'ajouter dans le front-end.
Cependant, si vous ne pouvez pas modifier le back-end, vous pouvez introduire une table de recherche définie dans le front-end pour déterminer votre ordre de tri.
Définissez chaque clé de votre table sur la valeur de la propriété que vous souhaitez trier. Dans ce cas "valeur":
const sortOrderTable = {
"DAILY": 0,
"SINGLE_TIER": 0,
"MULTI_TIER": 0,
"NO_DISCOUNT": 0,
"EOM": 0
}
Ajustez maintenant chaque valeur spécifique pour refléter l'ordre de tri souhaité.
Enfin, ajoutez un tube à votre requête dans votre .ts
pour effectuer le tri:
this.supplier.getPayTermTypes()
.pipe(
map(apiResponse => apiResponse.sort((a,b) => sortOrderTable[a.value] > sortOrderTable[b.value] ? -1 : 1)))
.subscribe(paymentTypes => {this.paymentTypeData=paymentTypes;});
NB Cette conception est fragile car elle repose sur le nom de propriété de l'objet de réponse de votre serveur pour ne pas changer afin de faire correspondre les valeurs de propriété à la table d'ordre de tri.