Angular 7 / Typescript -Sort Sélectionnez les options déroulantes dans un ordre particulier

Nov 26 2020

J'ai un select dropdownoù 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

LotteLemmens Nov 26 2020 at 09:07

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;
MikkelChristensen Nov 26 2020 at 10:37

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 .tspour 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.