NgFor कोणीय निर्देश का उपयोग कैसे करें

कोणीय आपकी वेबसाइट पर कुछ HTML तत्वों को गतिशील रूप से प्रस्तुत करने के लिए निर्देशों का उपयोग करता है। आपके द्वारा उपयोग किए जा सकने वाले संरचनात्मक निर्देशों में से एक ngFor है।

ngFor निर्देश आपको एक ही ब्लॉक को एक निर्दिष्ट संख्या में दोहराने की अनुमति देता है, या उनके विवरण प्रदर्शित करने के लिए वस्तुओं की एक सरणी के माध्यम से लूप करता है। यह एक शक्तिशाली उपकरण है जिसका उपयोग आप अन्य वस्तुओं के भीतर वस्तुओं को प्रस्तुत करने के लिए भी कर सकते हैं।

इसके कई कार्य भी हैं जो विशिष्ट परिदृश्यों में उपयोगी हो सकते हैं। इसमें पहले और अंतिम तत्वों को ढूंढना या कुछ वस्तुओं को छोड़ना शामिल है।

स्टेटिक नंबरों के माध्यम से लूप करने के लिए ngFor का उपयोग कैसे करें

ngFor निर्देश लूप के लिए आधारित है, इनमें से एक कई उपयोगी लूप जिनका जावास्क्रिप्ट समर्थन करता है. कोणीय (14) के वर्तमान संस्करण के अनुसार, आपको एक सरणी बनाने की आवश्यकता होगी जिसमें उन वस्तुओं की संख्या हो, जिनके माध्यम से आप लूप करना चाहते हैं।

1. आप ngFor स्टेटमेंट में ही एक लिस्ट बना सकते हैं। निम्नलिखित कोड अनुक्रमित 0 से 4 का उपयोग करते हुए एक पैराग्राफ को पांच बार दोहराएगा:

   <div *ngFor='[0, 1, 2, 3, 4] का आइटम दें; चलो मैं = सूचकांक'>
   <पी> यह दोहराया गया पैराग्राफ है: {{आइटम}} </पी>
   </div>

2. चूंकि उपरोक्त विधि बड़े सरणियों के लिए उपयुक्त नहीं हो सकती है, आप टाइपस्क्रिप्ट फ़ाइल में गतिशील रूप से एक सरणी भी बना सकते हैं:

   निर्यात करना कक्षाउदाहरण वर्गऔजारऑनइनिट{
    संख्या: सरणी<संख्या> = [];
   निर्माता() {
   // यह गतिशील रूप से निम्नलिखित सरणी बनाएगा:
   // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
   यह.नंबर = सरणी(10)।भरना(1).मैप((x, i)=>i);
    }
   }

3. फिर आप HTML में संख्या सरणी के माध्यम से लूप कर सकते हैं:

   <div *ngFor='संख्याओं की वस्तु दें; चलो मैं = सूचकांक'>
   <पी>यह दोहराया गया पैराग्राफ है: {{आइटम}}</पी>
   </div>

कुछ नंबरों को कैसे छोड़ें या स्टाइल करें

आप का उपयोग कर सकते हैं अजीब या यहाँ तक की हर दूसरे नंबर को निर्धारित करने के लिए ngFor चर। एक परिदृश्य जहां आपको यह उपयोगी लग सकता है, यदि आप एक अलग रंग का उपयोग करके तालिका में प्रत्येक विषम या यहां तक ​​कि पंक्ति को स्टाइल करना चाहते हैं।

1. किसी घटक के लिए CSS फ़ाइल में, कुछ नई CSS कक्षाएं जोड़ें। ये वे शैलियाँ हैं जिनका उपयोग आप कुछ तत्वों के लिए सम या विषम इंडेक्स पर करेंगे:

   ।लाल {
    लाल रंग;
   }
   ।नीला { 
    नीला रंग; 
   }
   

2. ngFor कथन के भीतर विषम और सम चर घोषित करें। ये वेरिएबल हैं जिन्हें एंगुलर पहचान लेगा। लाल सीएसएस वर्ग को सम संख्याओं और नीले सीएसएस वर्ग को विषम संख्याओं पर असाइन करें:

   <div *ngFor='संख्याओं की वस्तु दें; विषम = विषम; सम = सम' [एनजीक्लास]="{लाल: सम, नीला: विषम}">
   <पी> यह दोहराया गया पैराग्राफ है: {{आइटम}} </पी>
   </div>

3. का उपयोग करके अपनी कोणीय वेबसाइट चलाएँ एनजी सर्व और इसे वेब ब्राउज़र में खोलें। सम और विषम HTML तत्व अपने CSS वर्ग के आधार पर विभिन्न शैलियों के बीच वैकल्पिक होंगे:
4. यदि आप प्रत्येक सम संख्या को पूरी तरह से छोड़ना चाहते हैं, तो आप ngIf निर्देश का उपयोग कर सकते हैं। यह सभी विषम संख्याओं को छोड़ देगा और केवल सम संख्याएँ प्रदर्शित करेगा:

   <div *ngFor='संख्याओं की वस्तु दें; सम = सम'>
   <पी *एनजीआईएफ='यहाँ तक की'> यह दोहराया गया पैराग्राफ है: {{आइटम}} </पी>
   </div>

पिछड़े की गणना कैसे करें

पीछे की ओर गिनने के लिए, आप पारंपरिक तरीकों का उपयोग कर सकते हैं जैसे किसी सूची को उलटना या किसी इंडेक्स का उपयोग करके लूप के माध्यम से पीछे की ओर गिनना।

1. ngFor स्टेटमेंट में एक इंडेक्स वैरिएबल घोषित करें। ngFor के भीतर, सरणी की लंबाई से शुरू करें और उन वस्तुओं की संख्या घटाएं जिन्हें आपने पहले ही लूप कर लिया है:

   <div *ngFor="संख्याओं की वस्तु दें; चलो मैं = सूचकांक;">
   <पी> यह दोहराया गया पैराग्राफ है: {{numbers.length-i-1}} </पी>
   </div>

2. आप टाइपस्क्रिप्ट फ़ाइल में एक उलटी सूची भी बना सकते हैं:

   निर्यात करना कक्षाउदाहरण वर्गऔजारऑनइनिट{
    संख्या: सरणी<संख्या> = [];
    उलट सूची: ऐरे<संख्या> = [];
   निर्माता() {
   यह.नंबर = सरणी(10)।भरना(1).मैप((x, i)=>i);
   यह.उलट सूची = यह.numbers.slice().reverse();
    }
   }

3. ngFor का उपयोग करके उलटी सूची पर पुनरावृति करें:

   <div *ngFor='उल्टे सूची का आइटम दें; चलो मैं = सूचकांक'>
   <पी> यह दोहराया गया पैराग्राफ है: {{आइटम}} </पी>
   </div>

पहले और आखिरी एलिमेंट को अलग-अलग स्टाइल कैसे करें

आप पहले और अंतिम तत्वों को अन्य तत्वों से अलग स्टाइल कर सकते हैं पहला तथा अंतिम कोणीय चर। यह एक विकल्प है सीएसएस छद्म-वर्गों का उपयोग करना पसंद करना :पहला बच्चा.

1. ngFor स्टेटमेंट में, पहले और आखिरी वेरिएबल की घोषणा करें। पिछले चरणों में नीले और लाल सीएसएस वर्गों को असाइन करने के लिए ngClass निर्देश का उपयोग करें। नीले सीएसएस वर्ग को पहले तत्व और लाल सीएसएस वर्ग को अंतिम तत्व को असाइन करें:

   <div *ngFor='संख्याओं की वस्तु दें; चलो पहले = पहले; अंतिम = अंतिम होने दो' [एनजीक्लास]= "{नीला: पहला, लाल: अंतिम}">
   <पी> यह दोहराया गया पैराग्राफ है: {{आइटम}} </पी>
   </div>

वस्तुओं पर पुनरावृति करने के लिए ngFor का उपयोग कैसे करें

आप ऑब्जेक्ट्स के माध्यम से लूप करने के लिए ngFor निर्देश का उपयोग कर सकते हैं और उनके व्यक्तिगत चर तक पहुंच सकते हैं।

1. टाइपस्क्रिप्ट फ़ाइल में वस्तुओं की एक सूची बनाएँ। इस मामले में, उनके विवरण के साथ लोगों की एक सूची होगी:

   निर्यात करना कक्षाउदाहरण वर्गऔजारऑनइनिट{
    लोग = []; 
   निर्माता() {
   यहलोग = [
    { संतोष: 'जॉन', उपनाम: 'लोहार', व्यवसाय: 'मानव संसाधन प्रबंधक', प्रारंभ दिनांक: नई तिथि ("2019-02-05") },
    { संतोष: 'मेरी', उपनाम: 'जॉनसन', व्यवसाय: 'तकनीकी अधिकारी', प्रारंभ दिनांक: नई तिथि ("2016-01-07") },
    { संतोष: 'विलियम', उपनाम: 'भूरा', व्यवसाय: 'मानव संसाधन अधिकारी', प्रारंभ दिनांक: नई तिथि ("2018-03-03") },
    ];
    }
   }

2. HTML में, लोगों की सूची के माध्यम से लूप करने के लिए ngFor लूप का उपयोग करें। प्रत्येक व्यक्ति का उपयोग करके सुलभ होगा व्यक्ति चर। आप प्रत्येक व्यक्ति की विशेषताओं तक पहुँचने के लिए व्यक्ति चर का उपयोग कर सकते हैं:

   <div *ngFor='लोगों के व्यक्ति को जाने दो; चलो मैं = सूचकांक'>
   <एच 2> {{person.firstName}} {{person.lastName}} </h2>
   <पी> {{व्यक्ति.व्यवसाय}} </पी>
   <पी> {{person.startDate}} </पी>
   </div>

अन्य वस्तुओं के अंदर वस्तुओं को प्रदर्शित करने के लिए नेस्टेड एनजीफ़ोर का उपयोग कैसे करें

आप अन्य वस्तुओं के अंदर वस्तुओं को प्रदर्शित करने के लिए लूप के लिए नेस्टेड का उपयोग कर सकते हैं।

1. लोगों की सूची में बदलाव करें। प्रत्येक व्यक्ति के पास संपर्कों की एक आपातकालीन सूची होगी। प्रत्येक आपातकालीन संपर्क को एक अलग वस्तु के रूप में संग्रहीत करें:

   यहलोग = [
    {
    संतोष: 'जॉन',
    उपनाम: 'लोहार',
    आपातकालीन संपर्क: [
    { नाम: 'अमांडा स्मिथ', रिश्ता: 'बीवी', फ़ोन: '0441239876' },
    { नाम: 'बैरी स्मिथ', रिश्ता: 'बेटा', फ़ोन: '0442239876'}
    ]
    },
    {
    संतोष: 'मेरी',
    उपनाम: 'जॉनसन',
    आपातकालीन संपर्क: [
    { नाम: 'मार्क जॉनसन', रिश्ता: 'पति', फ़ोन: '0443239876' }
    ]
    },
    ];

2. HTML में, प्रत्येक आपातकालीन संपर्क के माध्यम से लूप करने के लिए अपने मूल लूप के अंदर एक नेस्टेड लूप बनाएं, और उनका विवरण प्रदर्शित करें:

   <div *ngFor='लोगों के व्यक्ति को जाने दो; चलो मैं = सूचकांक'>
   <एच 2> {{person.firstName}} {{person.lastName}} </h2>
   <div *ngFor='व्यक्ति से संपर्क करने दें। आपातकालीन संपर्क; चलो जे = सूचकांक'>
   <एच5> आपातकालीन संपर्क: </h5>
   <पी> {{संपर्क नाम}} </पी>
   <पी> {{व्यक्ति.संबंध}} </पी>
   <पी> {{व्यक्ति.फ़ोन}} </पी>
   </div>
   <बीआर>
   </div>

कोणीय में ngFor का उपयोग कर लूपिंग

आप अपनी वेबसाइट पर HTML तत्वों के माध्यम से गतिशील रूप से लूप करने के लिए ngFor संरचनात्मक निर्देश का उपयोग कर सकते हैं। यह आपको एक ही ब्लॉक को कई ऑब्जेक्ट्स के लिए, या निर्दिष्ट समय के लिए दोहराने की अनुमति देगा।

आप इसका उपयोग अन्य तरकीबें करने के लिए भी कर सकते हैं जैसे कि प्रत्येक सम या विषम संख्या को छोड़ना या पहले और अंतिम तत्व को स्टाइल करना। आप इसका उपयोग अन्य वस्तुओं के भीतर कई वस्तुओं को गतिशील रूप से प्रस्तुत करने के लिए भी कर सकते हैं।

अन्य कोणीय निर्देश हैं जिनका उपयोग आप अपनी वेबसाइट को अधिक गतिशील बनाने में मदद के लिए कर सकते हैं। इनमें ngIf, ngSwitch, ngStyle, ngClass और ngModel शामिल हैं।