Angular 7 / Typecript -Sort Pilih opsi drop down Dalam Urutan Tertentu

Question

Saya memiliki select dropdownopsi tempat diambil dari layanan menggunakan secara dinamis *ngFor. Saya ingin menyusun ulang urutan opsi dengan cara saya sendiri. Apakah mungkin dilakukan dari kode sudut ?. Array seperti ini

   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)

Saat ini mereka mencari di Ordo ini

• Harian
• Tingkat Tunggal
• Multi Tier
• Tidak ada diskon
• Akhir bulan

Tapi saya ingin menampilkan dengan urutan di bawah ini:

• Tidak ada diskon
• Tingkat Tunggal
• Harian
• Multi Tier
• Akhir bulan

HTML:

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

Naskah:

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

Answer 1

Saya sarankan untuk menambahkan properti sortOrder di paymentTypes Anda, lalu saat Anda mengambil paymentTypes, Anda bisa mengurutkannya pada pesanan yang ditentukan.

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

Answer 2

Saya akan mengatakan bahwa solusi Lotte Lemmens untuk menambahkan sortOrder di back-end akan ideal daripada menambahkannya di front-end.

Namun, jika Anda tidak dapat mengubah back-end, Anda dapat memperkenalkan tabel pencarian yang ditentukan di front-end untuk menentukan urutan sortir Anda.

Tentukan setiap kunci dalam tabel Anda dengan nilai properti yang ingin Anda sortir. Dalam kasus ini "nilai":

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

Sekarang sesuaikan setiap nilai spesifik untuk mencerminkan urutan sortir yang Anda inginkan.

Terakhir, tambahkan pipa ke permintaan Anda .tsuntuk melakukan penyortiran:

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

NB Ini adalah desain yang rapuh karena bergantung pada nama properti objek respons dari server Anda agar tidak berubah untuk mencocokkan nilai properti ke tabel urutan.