*ngFor ऑब्जेक्ट के लिए: प्रदर्शन खोए बिना कुंजियाँ और मान कैसे प्राप्त करें

समस्या जो हर Angular डेवलपर से परिचित है

क्या आपने कभी Angular टेम्पलेट में *ngFor का उपयोग करके एक सामान्य JavaScript ऑब्जेक्ट की सामग्री प्रदर्शित करने की कोशिश की है और अचानक महसूस किया: "मैं कुंजी और मान दोनों कैसे प्राप्त करूँ?" क्योंकि *ngFor डिफ़ॉल्ट रूप से केवल ऐरे के साथ काम करता है। और ऑब्जेक्ट कोई ऐरे नहीं है।

यह प्रश्न Stack Overflow पर सबसे लोकप्रिय में से एक है (हज़ारों व्यूज़ और दर्जनों उत्तर)। डेवलपर्स केवल एक समाधान नहीं, बल्कि सही समाधान ढूंढ रहे हैं - वह जो एप्लिकेशन के प्रदर्शन को न मारे, खासकर जब ऑब्जेक्ट बड़ा हो या बार-बार अपडेट होता हो।

इस लेख में हम केवल उत्तर नहीं देंगे। हम सभी मुख्य दृष्टिकोणों पर चर्चा करेंगे, सरल से लेकर उन्नत तक, और दिखाएंगे कि ऐसा कोड कैसे लिखें जो तेज़ और स्थिर रूप से काम करे। चलिए शुरू करते हैं!

*ngFor "आउट ऑफ़ द बॉक्स" ऑब्जेक्ट के साथ क्यों काम नहीं करता?

Angular में *ngFor निर्देश पुनरावृत्त संरचनाओं (Iterable) के लिए डिज़ाइन किया गया है। ऐरे एक पुनरावृत्त संरचना है। ऑब्जेक्ट नहीं है। जब आप लिखते हैं:

<div *ngFor="let item of myObject">{{ item }}</div>

Angular एक त्रुटि देगा: "Cannot find a differ supporting object '...'"। Angular बस यह नहीं जानता कि ऑब्जेक्ट को कैसे पुनरावृत्त किया जाए।

लेकिन व्यवहार में, हमें अक्सर ऑब्जेक्ट से डेटा प्रदर्शित करने की आवश्यकता होती है: कॉन्फ़िग, शब्दकोश, API प्रतिक्रियाएँ, जहाँ कुंजियाँ अर्थपूर्ण होती हैं (उदाहरण के लिए, { name: 'Анна', age: 25, city: 'Москва' })।

सबसे सरल तरीका: Object.keys() और Object.entries()

Stack Overflow पर सबसे लोकप्रिय और स्पष्ट उत्तर है ऑब्जेक्ट को सीधे टेम्पलेट में या कंपोनेंट में ऐरे में बदलना।

विकल्प 1: Object.keys() - केवल कुंजियाँ प्राप्त करें

// कंपोनेंट में (TypeScript)\nexport class MyComponent {\n  myObject = { name: 'Анна', age: 25, city: 'Москва' };\n}

<!-- टेम्पलेट में -->\n<div *ngFor="let key of objectKeys(myObject)">\n  कुंजी: {{ key }}, मान: {{ myObject[key] }}\n</div>

लेकिन यहाँ एक बारीकी है: objectKeys टेम्पलेट में उपलब्ध होना चाहिए। या तो इसे कंपोनेंट की विधि बनाएँ, या इसे एक अलग प्रॉपर्टी में रखें:

// कंपोनेंट\nexport class MyComponent {\n  myObject = { name: 'Анна', age: 25, city: 'Москва' };\n  objectKeys = Object.keys; // बस नेटिव फ़ंक्शन का संदर्भ\n}

यह काम करता है, लेकिन प्रत्येक चेंज डिटेक्शन (change detection) चक्र पर फ़ंक्शन को कॉल करता है। यदि ऑब्जेक्ट बड़ा है - तो यह प्रदर्शन पर एक झटका है।

विकल्प 2: Object.entries() - कुंजियाँ और मान एक साथ

// कंपोनेंट\nexport class MyComponent {\n  myObject = { name: 'Анна', age: 25, city: 'Москва' };\n  get entries() {\n    return Object.entries(this.myObject);\n  }\n}

<!-- टेम्पलेट -->\n<div *ngFor="let entry of entries">\n  कुंजी: {{ entry[0] }}, मान: {{ entry[1] }}\n</div>

या डिस्ट्रक्चरिंग के साथ (अधिक पठनीय):

<div *ngFor="let [key, value] of entries">\n  कुंजी: {{ key }}, मान: {{ value }}\n</div>

लाभ: सरल, समझने योग्य, स्पष्ट।
\nनुकसान: entries विधि प्रत्येक चेंज डिटेक्शन चक्र पर कॉल की जाएगी। स्थिर ऑब्जेक्ट के लिए - ठीक है, गतिशील के लिए - समस्या हो सकती है।

प्रदर्शन: यह क्यों महत्वपूर्ण है?

कल्पना करें कि आपके ऑब्जेक्ट में 10,000 प्रविष्टियाँ हैं। या यह हर 100 मिलीसेकंड में अपडेट होता है (उदाहरण के लिए, रीयल-टाइम सर्वर डेटा)। Object.entries() का प्रत्येक कॉल एक नया ऐरे बनाता है। Angular प्रत्येक चेंज डिटेक्शन चक्र पर एक "नया" ऐरे देखेगा और पूरी सूची को फिर से रेंडर करेगा। इससे इंटरफ़ेस में हिचकिचाहट, इनपुट पर फ़ोकस खोना और धीमापन होता है।

इसलिए गंभीर प्रोजेक्ट के लिए ऑप्टिमाइज़्ड दृष्टिकोण का उपयोग करना आवश्यक है।