कोणीय 7 / टाइपस्क्रिप्ट -Sort विशेष क्रम में ड्रॉप डाउन विकल्प का चयन करें

Nov 26 2020

मेरे पास एक select dropdownविकल्प है जहां सेवा का गतिशील रूप से उपयोग करके लिया जाता है *ngFor। मैं अपने कस्टम तरीके से विकल्प के क्रम को फिर से व्यवस्थित करना चाहता हूं । क्या कोणीय कोड से करना संभव है? सरणी इस प्रकार है

   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)

वर्तमान में वे इस आदेश में दिखते हैं

  • रोज
  • एकल पंक्ति
  • मल्टी टियर
  • कोई छूट नहीं
  • माह की समाप्ति

लेकिन मैं नीचे दिए गए क्रम में प्रदर्शित करना चाहता हूं:

  • कोई छूट नहीं
  • एकल पंक्ति
  • रोज
  • मल्टी टियर
  • माह की समाप्ति

HTML:

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

टाइपप्रति:

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

जवाब

LotteLemmens Nov 26 2020 at 09:07

मेरा सुझाव है कि अपने भुगतानटाइप में एक प्रकार की संपत्ति जोड़ने के लिए, फिर जब आप अपने भुगतान प्राप्त करते हैं तो आप उन्हें उस निर्दिष्ट क्रम पर सॉर्ट कर सकते हैं।

this.paymentTypeData.sort((a,b) => a.sortOrder > b.sortOder ? -1 : 1;
MikkelChristensen Nov 26 2020 at 10:37

मैं कहूंगा कि लोटे लेम्मेन्स को बैक-एंड पर सॉर्टऑर्डर जोड़ने का समाधान फ्रंट-एंड में जोड़ने के बजाय आदर्श होगा।

हालाँकि, यदि आप बैक-एंड नहीं बदल सकते हैं तो आप अपने क्रम को निर्धारित करने के लिए फ्रंट-एंड में परिभाषित लुकअप तालिका को प्रस्तुत कर सकते हैं।

अपनी तालिका की प्रत्येक कुंजी को उस संपत्ति के मूल्य में परिभाषित करें, जिसे आप छांटना चाहते हैं। इस मामले में "मूल्य":

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

अब अपने इच्छित क्रम को दर्शाने के लिए प्रत्येक विशिष्ट मान को समायोजित करें।

अंत में, .tsछँटाई करने के लिए अपने अनुरोध में एक पाइप जोड़ें :

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

NB यह भंगुर डिजाइन है क्योंकि यह आपके सर्वर से प्रतिक्रिया ऑब्जेक्ट के संपत्ति के नाम पर निर्भर करता है ताकि संपत्ति के मूल्यों को क्रम क्रम तालिका से मिलान करने के लिए बदल न जाए।