ngIf साथ Angular2 आइटम flickers

Question

पृष्ठभूमि

मेरे पास क्रेडिट कार्ड के फार्म घटक बनाने रहा हूँ। घटक जांचता है कि कौन सा क्रेडिट कार्ड प्रकार दर्ज किया गया है, और कार्ड प्रकार का प्रतीक/प्रतीक दिखाता है। प्रतीक एक बाहरी एसवीजी है जो क्रेडिट कार्ड प्रकार की पहचान के तुरंत बाद लोड होता है।

समस्या

cc-प्रतीक, flickers के रूप में आप नीचे चित्र में देख सकते हैं। क्रोम डोम इंस्पेक्टर में एक नज़र मुझे दिखाता है कि *ngIf के साथ तत्व के साथ कुछ चल रहा है, तत्व को किसी भी तरह से अपडेट किया जा रहा है (बिना किसी विशेषताओं को बदल रहा है) जो झटके का कारण बनता है।

कोड

नीचे मेरे टेम्पलेट का हिस्सा है कि अस्थिर हिस्सा रखने वाले के लिए कोड है। मैंने घटक की जांच की है और ngIf में उपयोग किए गए चर को अपडेट नहीं किया गया है, जब यह माना जाता है कि जब (जब क्रेडिट कार्ड नंबर अलग-अलग प्रकार में बदल जाता है)।

<div class="credit-card-icon" *ngIf="creditCardType != null"> 
    <object type="image/svg+xml" [data]="getTypeIconUrl()"></object> 
</div> 

इस समस्या का कारण क्या हो सकता है, और मैं इसे कैसे हल करूं?

अद्यतन

ऐसा लगता है कि यह वास्तव में नहीं बल्कि ngIf से कोई लेना देना की तुलना में [data] विशेषता के कारण होता है। आपको दोषी ठहराते हुए क्षमा करें, एनजी अगर।

Answer 1

इस पोस्ट को लिखने के बाद मुझे यह सोचने लगा कि यह डीओएम तत्व object को हर समय अपडेट करने का प्रयास क्यों करेगा। समाधान बाहर निकलना बहुत स्पष्ट था। चूंकि यह मुद्दा एक स्थिर data-सामग्री के साथ नहीं हुआ था, लेकिन केवल गतिशील रूप से [data]-सामग्री के साथ, मैंने अनुमान लगाया कि ऑब्जेक्ट समानता के साथ इसका कुछ संबंध था।

मेरे घटक में मैं आइकन के यूआरएल को "अनुमोदित" करने के लिए DomSanitizer की bypassSecurityTrustResourceUrl(url) विधि का उपयोग करता हूं।

हालांकि, निम्नलिखित बयान हमेशा गलत है:

bypassSecurityTrustResourceUrl(url) == bypassSecurityTrustResourceUrl(url) 

SafeResourceUrlbypassSecurityTrustResourceUrl(url) इस मुद्दे से लौटे कैशिंग तक हल हो गई है!