मैं एक चुनिंदा ड्रॉपडाउन के अंदर एक जेसन सरणी से डेटा प्रदर्शित करने का प्रयास कर रहा हूं।

<select class="form-control-custom" [(ngModel)]="selected"  placeholder="Filter Category By">
    <option>Get Countries By Currency Name</option>
    <option *ngFor="let currency of allData;">{{currency[0].name}}</option>          
</select>

मैंने ऑलडाटा फ़ील्ड के अंदर सभी मुद्रा सरणी प्राप्त करने के लिए एक तर्क लिखा है जिसे मैंने चुनिंदा ड्रॉपडाउन में उपयोग किया है। डेटा इस तरह दिखता है: यहां छवि विवरण दर्ज करें

इसलिए मैं एकल ngFor लूप का उपयोग करके किसी अन्य सरणी के अंदर सरणी को पुन: सक्रिय करने में सक्षम नहीं हूं, मुझे केवल चुनिंदा ड्रॉपडाउन के अंदर डेटा प्रदर्शित करना होगा।

यहाँ json डेटा की वास्तविक एपीआई है: https://restcountries.eu/rest/v2/all

मैं इस जेसन डेटा के अंदर मुद्रा सरणी लूप करने की कोशिश कर रहा हूं:

किसी भी प्रकार की मदद की अत्यधिक सराहना की जाती है।

अग्रिम में धन्यवाद।

1
vennapusa 15 मई 2018, 07:28

2 जवाब

सबसे बढ़िया उत्तर

आप <ng-container> और नेस्टेड ngFor का उपयोग कर सकते हैं

 <select class="form-control-custom" [(ngModel)]="selected"  placeholder="Filter Category By">
    <option>Get Countries By Currency Name</option>
    <ng-container *ngFor="let currency of allData;">
      <option *ngFor="let currenObj of currency.currencies;"> {{currenObj.name}} </option>
    </ng-container>    
</select>

DEMO STACKBLITZ

3
Sajeetharan 15 मई 2018, 07:35

यहां कुछ विचार दिए गए हैं कि आप जो चाहते हैं उसे कैसे संबोधित करें। मुझे चुनिंदा घटक के लिए नेस्टेड आइटम बनाने का यह नमूना पसंद है https://codepen.io/sathomas/pen/VpJeEo

यह इस समस्या के लिए थोड़ा जटिल हो सकता है। इसे आसान बनाने के लिए मेरा मानना ​​है कि आप उप-चयन विकल्प बनाने के लिए परिवर्तनीय बाध्यकारी का उपयोग कर सकते हैं। माता-पिता बनाएं-> बाल संबंध।

<select [(ngModel)]="selectedCountry">
    <option *ngFor="country of AllData" [ngValue]='country'>{{country.name}}</option>
</select>
<select id='child' [(ngModel)]="selectedCurrency">
    <option *ngfor="currency of SelectedCountry.currencies" [ngValue]="currency.code'>{{currency.name}}</option>
</select>

आप पहले चयन के लिए ngValue के रूप में काउंटी.मुद्रा का उपयोग कर सकते हैं और दूसरे चयन में इसके पूर्ण संदर्भ को शॉर्टकट कर सकते हैं। हालांकि इस तरह पूरे देश के साथ, आप अलग-अलग चुनिंदा तत्वों में अन्य संपत्ति सरणी मानों का चयन कर सकते हैं।

नोट: मैंने सिंटैक्स के परीक्षण के बिना सभी कोड लिखे हैं, इसलिए कृपया वहां किसी भी गलती को क्षमा करें।

2
user3243621 15 मई 2018, 07:59