2016-12-12 9 views
6

के साथ इनपुट इनपुट तत्वों के साथ कोणीय 2 प्रदर्शन मेरे पास एक घटक है जो एक स्प्रेडशीट के समान यूआई प्रदर्शित करता है। एक विस्थापन ऑब्जेक्ट में दो तरह के बाध्यकारी [(ngModel)] के साथ बहुत से तत्व हैं।दो तरह के बाध्यकारी

जैसे ही इनपुट की संख्या पिछले 100 या इतनी इनपुट बढ़ती है कि यूआई सुस्त हो जाती है। प्रोफाइलर दशमलव प्रारूप (दशमलव पाइप) में बहुत समय दिखाता है।

  1. अपरिवर्तनीय वस्तुओं का उपयोग करते हुए किसी भी तरह:

    मैं संभव समाधान की एक जोड़ी के बारे में सोच सकते हैं?

  2. 2 तरीके डेटाबेसिंग को अनुकूलित करना?

मैं नहीं हूँ ChangeDetectionStrategy OnPush का उपयोग कर, लेकिन मैं यह कैसे मदद करेगा और कैसे वास्तव में एचटीएमएल आदानों पर [(ngModel)] के साथ इसे लागू करने के लिए उत्सुक हूँ।

+0

क्या आप 'changeDetection: ChangeDetectionStrategy.OnPush' का उपयोग कर रहे हैं? –

+0

नहीं, मैं ChangeDetectionStrategy OnPush – geejay

+1

का उपयोग नहीं कर रहा हूं यह मोर जुर्माना नियंत्रण के लिए बेहतर प्रदर्शन के लिए पहला उपाय है कि कितना कार्य परिवर्तन पहचान करना चाहिए। –

उत्तर

1

चूंकि NgModel निर्देश है कि यह परिवर्तन पहचान रणनीति का समर्थन नहीं करता है, इसका मतलब है कि आपको NgModel से बचना चाहिए। एकमात्र तरीका कस्टम घटक बनाना है जो OnPush रणनीति का उपयोग करता है और इनपुट फ़ील्ड को लपेटता है।

2

सीपीयू और उपयोगकर्ता दोनों के लिए पृष्ठ पर कई इनपुट फ़ील्ड तनावपूर्ण दोनों हैं।

एक साथ कई इनपुट फ़ील्ड के साथ एक स्प्रेडशीट दिखाने के बजाय - मैं सेल को केवल ध्यान केंद्रित करते समय एक इनपुट फ़ील्ड बना देता हूं, और अन्यथा केवल सेल का मान दिखाता है। वर्तमान सेल संपादित करने के लिए इनपुट जांच पर * ngIf का उपयोग करें।

इस तरह आप अपनी इच्छित कार्यक्षमता को रखने में सक्षम होना चाहिए, लेकिन केवल केंद्रित स्प्रेडशीट सेल को एक इनपुट बनाकर - जो पृष्ठ के प्रदर्शन को बेहतर बनाना चाहिए।

संबंधित मुद्दे