Angular 7 / Typescript - Selecionar opções suspensas em ordem particular

Question

Eu tenho um select dropdownonde as opções são buscadas no serviço dinamicamente usando *ngFor. Quero reordenar a ordem da opção da minha maneira personalizada. É possível fazer a partir do código angular ?. O array é assim

   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)

Atualmente eles olham neste pedido

• Diariamente
• Camada Única
• Multi Tier
• Sem Desconto
• Fim do mês

Mas eu quero exibir na ordem abaixo:

• Sem Desconto
• Camada Única
• Diariamente
• Multi Tier
• Fim do mês

HTML:

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

Texto datilografado:

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

Answer 1

Sugiro adicionar uma propriedade sortOrder em seus paymentTypes; em seguida, quando você buscar seus paymentTypes, poderá classificá-los no pedido especificado.

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

Answer 2

Eu diria que a solução Lotte Lemmens de adicionar um sortOrder no back-end seria ideal em vez de adicioná-lo no front-end.

No entanto, se você não pode alterar o back-end, pode introduzir uma tabela de pesquisa definida no front-end para determinar sua ordem de classificação.

Defina cada chave em sua tabela com o valor da propriedade pela qual deseja classificar. Neste caso, "valor":

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

Agora ajuste cada valor específico para refletir sua ordem de classificação desejada.

Por fim, adicione um pipe à sua solicitação .tspara realizar a classificação:

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

NB Este é um design frágil, pois depende do nome da propriedade do objeto de resposta de seu servidor para não mudar a fim de corresponder os valores das propriedades à tabela de ordem de classificação.