Angular 7 / Typescript -Sort Seçme açılır seçenekleri Özel Sırayla

Question

select dropdownSeçeneklerin hizmetten dinamik olarak kullanılarak getirildiği bir yer var *ngFor. Seçeneğin sırasını kendi özel yöntemimle yeniden düzenlemek istiyorum . Açısal koddan yapmak mümkün mü? Dizi böyle

   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)

Şu anda bu Siparişe bakıyorlar

• Günlük
• Tek aşama
• Çok Katmanlı
• İndirim yok
• Ayın sonu

Ancak aşağıdaki sırayla görüntülemek istiyorum:

• İndirim yok
• Tek aşama
• Günlük
• Çok Katmanlı
• Ayın sonu

HTML:

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

Typescript:

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

Answer 1

PaymentTypes'ınıza sortOrder özelliği eklemenizi öneririm, ardından paymentTypes'ınızı getirdiğinizde bunları belirtilen sıraya göre sıralayabilirsiniz.

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

Answer 2

Lotte Lemmens'in arka uca bir sortOrder ekleme çözümünün, onu ön uca eklemek yerine ideal olacağını söyleyebilirim.

Bununla birlikte, arka ucu değiştiremezseniz, sıralama düzeninizi belirlemek için ön uçta tanımlanmış bir arama tablosu sunabilirsiniz.

Tablonuzdaki her anahtarı, sıralamak istediğiniz özelliğin değerine göre tanımlayın. Bu durumda "değer":

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

Şimdi her bir değeri, istediğiniz sıralama düzenini yansıtacak şekilde ayarlayın.

Son olarak, .tssıralamayı gerçekleştirmek için isteğinize bir boru ekleyin :

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

NB Bu, özellik değerlerini sıralama düzeni tablosuyla eşleştirmek için sunucunuzdan gelen yanıt nesnesinin özellik adına bağlı olduğu için kırılgan bir tasarımdır.