Angular: 4

Redux का उपयोग करने के साथ भी यही मुद्दा था। यहाँ जारी करने के लिए एक लिंक है जो मैंने उनके भंडार पर पोस्ट किया है। जब कोणीय 2 पर कोई त्रुटि नहीं होती है, लेकिन कोणीय 4.2.2 पर मुझे त्रुटियों को जाँचने के बाद अभिव्यक्ति में बदलाव आता है।
https://github.com/angular-redux/store/issues/428

4.1.3 से 4.2.x तक टकराते समय समस्या मेरे घटकों पर दिखाई देती है। 4.1.3 पर वापस आना मेरे लिए समस्या को हल करता है, लेकिन यह ऐसी चीज नहीं है जिसे मैं हमेशा के लिए रखना चाहता हूं।

मैं एक न्यूनतम परियोजना पर पुन: पेश कर सकता हूं, मैं अभी भी यह पता लगाने की कोशिश कर रहा हूं कि इस (शायद) प्रतिगमन को कैसे ठीक किया जाए। लेकिन ऐसा लगता है कि गंदा चेक देव में लागू किया गया है। मोड 4.2.x से। लेकिन उस बारे में चैंज स्पष्ट नहीं है। किसी भी टिप का स्वागत है।

मुझे 4.1.3 से 4.2.3 तक अपग्रेड करने के बाद भी यही समस्या है। सेटटाइमआउट का उपयोग समस्या को ठीक करता है।

से:

PanictUtil.getRequestObservable ()। Subscribe (data => this.requesting = data);

सेवा:

PanictUtil.getRequestObservable ()। Subscribe (data => setTimeout (() => this.requesting = data, 0));

@jingglang क्या आप कृपया http://plnkr.co/edit/tpl : AvJOMERrnz94ekVua0u5 पर समस्या को कम से कम कोड के साथ संभव के रूप में पुन: पेश करने का प्रयास कर सकते हैं?

मुझे एक ही मुद्दा मिल रहा है - 2.4 से 4.2 तक अपग्रेड किया गया है, और मेरे कुछ छिपाने / दिखाने के तर्क अब टूट गए हैं। यह अकॉर्डियन-शैली का तर्क है, जहां दृश्यता वर्तमान पैनल की तुलना एक अवलोकन योग्य है जो यह मानती है कि कौन सा पैनल दृश्यमान होना चाहिए (कुछ चीजों के बीच)। घटक अवलोकन प्राप्त करने के लिए @ का उपयोग करता है, और इसके साथ बाध्य है | टेम्प्लेट में async - 2.4 में एक आकर्षण की तरह काम किया, अब एक्सप्रेशनचेंज किए गए ItItHasBeenCheckedError और पैनल को छिपाएं और पहले क्लिक पर न दिखाएं, केवल दूसरे पर।

4.1.3 से 4.2.2 अपडेट होने पर मुझे एक ही मुद्दा मिलता है।

लेकिन, मुझे वर्कअराउंड मिला।
ChangeDetectionRef का इंजेक्शन, और त्रुटि बिंदु पर detectionChanges() फ़ंक्शन को कॉल करें।

constructor(private cdr: ChangeDetectionRef) {
}

onChange(): void {
  this.val += 1; // <- get error after
  this.cdr.detectionChanges();
}

मुझे लगता है कि यह 4.2 में किए गए बदलाव के साथ एक मुद्दा है।

https://github.com/angular/angular/pull/16592

इस समस्या को हल करने के लिए: https://github.com/angular/angular/issues/14321

क्या आपके पास ng-content टैग के अंदर कोई सामग्री है?

मेरे पास ng-content टैग के अंदर एक फॉर्म के साथ एक ही मुद्दा है जो अब ContentChangedAfter त्रुटि के साथ त्रुटियां करता है।

4.1.3 से 4.2.0 या उच्चतर अपडेट होने पर मुझे वही मुद्दा मिलता है

मैं बग को पुन: पेश करने के लिए थोड़ा प्रोजेक्ट संलग्न करता हूं

app-error.zip

फ़ॉलो करने के बाद, मैंने 4.1.3 पर डाउनग्रेड किया (जैसा कि ऊपर सलाह दी गई है) और त्रुटि दूर हो जाती है, इसलिए संघर्ष जो भी हो, यह 4.2 के लिए विशिष्ट है। मुझे इस सप्ताह (या अगले) एक साथ एक प्लंकर लगाने का समय नहीं मिला है, लेकिन यह स्टोर पर दो अलग-अलग वेधशालाओं को अद्यतन करने वाली एकल कार्रवाई से संबंधित है, जिनमें से प्रत्येक का यूआई पर प्रभाव पड़ता है। UI अपडेट में से एक होता है, दूसरा अपवाद का कारण बनता है।

हममम,
निश्चित रूप से 4.1.3 संस्करण में रोलबैक समस्या को हल करता है और @jingglang द्वारा दिखाए गए टाइमआउट को भी लागू करता है।

हाय @tytskyi। मैंने इस मुद्दे के लिए एक plunkr http://plnkr.co/edit/XAxNoV5UcEJOvsAbeLHT बनाया। आशा है कि यह मदद करेगा।

@jingglang द्वारा दिए गए वर्कअराउंड 4.2.0 या उच्चतर पर (मेरे लिए) काम करता है
या बच्चे के उत्सर्जक घटना को उसके निर्माता में बदलना भी त्रुटि को बढ़ाता नहीं है

@umens आप

@alexzuza मैं

हाय @umens आपके समय के लिए धन्यवाद। समस्या यह है कि @alexzuza क्या कहती है: जाँच के बाद आप मूल घटक फ़ील्ड को अपडेट करते हैं। आपका कोड लगभग इसके बराबर है: http://plnkr.co/edit/ksOdACtXScZKw3VRAYTm?p=preview (कोड को कम करने के लिए नोटिस मैंने सेवा को हटा दिया)।
यह काम क्यों किया? संभवतः दुर्घटना के कारण कोणीय या Rxjs के पुराने संस्करण में यहाँ बग था। क्या आप बता सकते हैं कि किन संस्करणों का उपयोग किया गया था? या यहां तक ​​कि काम कर रहे प्लंकर में डाल दिया?

सेटटिमाउट को डालने से अब त्रुटि क्यों नहीं उठती है।

क्योंकि आप फ़ील्ड को एसिंक्रोनस रूप से बदलते हैं, जो एक तरफ़ा डेटा प्रवाह का सम्मान करता है।

चलो इसे विपरीत से मानते हैं: त्रुटि क्यों उठाई जाती है? चेंज डिटेक्शन का पहला चेक ऊपर से नीचे तक जाता है। यह टेम्पलेट के लिए बाध्य app.toolsConfig मूल्य की जांच करता है। तब यह <child-cmp> जो सिंक्रोनस app.toolsConfig अपडेट करता है। प्रतिपादन किया जाता है। अब यह सुनिश्चित करने के लिए परिवर्तन जांच का दूसरा (देव मोड केवल) चलाता है ताकि यह सुनिश्चित हो सके कि एप्लिकेशन स्थिति स्थिर है। लेकिन बच्चा देने से पहले app.toolsConfig app.toolsConfig बाद नहीं के बराबर है। यह सब एकल "टर्न", चेंज डिटेक्शन के "चक्र" के दौरान होता है।

ठीक। विस्तृत उत्तर के लिए धन्यवाद। चाइल्ड कंपोनेंट जीवनचक्र कब होता है, इसके बारे में मुझे कोई जानकारी नहीं मिली।
पिछले "काम कर रहे" संस्करण के लिए मैंने इस्तेमाल किया:
@ कोणीय / *: 4.1.1 (कंपाइलर-क्लाई को छोड़कर -> 4.1.0)
rxjs: 5.3.1

@umens यहाँ आपके द्वारा उल्लिखित पुराने संस्करणों के साथ त्रुटि को पुन: प्रस्तुत किया गया है: http://plnkr.co/edit/kfoKmigXzFXwOGb2wyT1?p=preview। यह फेंकता है, इसलिए शायद कुछ 3 पार्टी निर्भरता प्रभावित व्यवहार या पूर्ण प्रजनन निर्देश नहीं है?

नहीं बता सकता।
यहाँ मेरा यार्न है। यदि आप आगे जाने में रुचि रखते हैं: https://pastebin.com/msARLta1
लेकिन मुझे नहीं पता कि क्या अलग हो सकता है

मैं 4.1.2 से 4.2.3 पर स्विच करने के बाद "ExpressionChanged ..." समान त्रुटियों को देख रहा हूं।

मेरे मामले में, मेरे पास दो घटक हैं जो एक सेवा के माध्यम से बातचीत करते हैं। सेवा मेरे मुख्य मॉड्यूल के माध्यम से प्रदान की जाती है, और ComponentA ComponentB से पहले बनाई जाती है।

4.1.2 , निम्नलिखित सिंटैक्स ने त्रुटियों के बिना ठीक काम किया:

घटक घटक:

<ul *ngIf="myService.showList">
...

घटक श्रेणी:

ngOnInit() {
  this.myService.showList = false; //starts as true in the service
  ...
}

4.2.3 , मुझे "ExpressionChanged ..." त्रुटि से बचने के लिए ComponentA टेम्पलेट को संशोधित करना होगा:

घटक घटक:

<ul [hidden]="!myService.showList">
...

मैं अभी भी यह पता लगाने की कोशिश कर रहा हूं कि यह केवल एक मुद्दा क्यों बन गया है, और *ngIf से [hidden] काम करने के लिए स्विच क्यों।

मैं एक ही समस्या है, और यह ज्यादातर तब होता है जब मैं इस तरह एक async पाइप का उपयोग कर रहा हूँ:
<div>{{ (obs$ |async).someProperty }}</div>
अगर मैं इसे इस तरह से उपयोग करता हूं:

<div *ngIf="obs$ | async as o">
  <div>{{ o.someProperty }}</div>
</div>

फिर त्रुटि गायब हो जाती है, इसलिए मुझे यकीन नहीं है कि यह केवल इसलिए है क्योंकि बहुत से लोगों ने कुछ गलती की है जो पहले पता नहीं लगाया गया था: मुझे लगता है कि एक बग 4.2 में पेश किया गया था ...

मेरे लिए भी यही समस्या है। यह समस्या @ कोणीय / राउटर से आती है

मैं भी इस निष्कर्ष पर आया हूं कि यह राउटर से संबंधित है। कल के रूप में पोस्ट करने की कोशिश की, लेकिन ऐसा लगता है कि पोस्ट विफल रही। मैंने आगे जांच की और कोड को सरल किया कि क्या मैं त्रुटि को ट्रैक कर सकता हूं। निम्न कोड पूरी तरह से काम करता है जब कार्रवाई का अंतिम स्रोत एक पैनल हेडर पर एक क्लिक होता है, लेकिन रूटिंग के माध्यम से ट्रिगर होने पर एक्सप्रेशनचैन्ड त्रुटि के साथ विफल हो जाता है।

<span class="glyphicon pull-right" [ngClass]="{'glyphicon-chevron-up' : (ui$ | async)?.visiblePanels[VisiblePanel.IngredientTypes], 'glyphicon-chevron-down' : !((ui$ | async)?.visiblePanels[VisiblePanel.IngredientTypes])}"></span>

इससे मुझे समस्या हल करने में मदद मिली! आपको मूल रूप से परिवर्तन को स्पष्ट रूप से ट्रिगर करना होगा।

@Acidghost की तरह, मैं अपने मूल घटक से ChangeDetectorRef#detectChanges AfterViewInit चलाकर इस समस्या को हल कर सकता था।

यदि आपके पास प्लंकर रेप्रो है, तो मैं इस पर जांच करने के लिए तैयार हूं क्योंकि हमें कुछ ऐसी ही शिकायतें थीं, जो कि हमेशा एक उपयोगकर्ता की समस्या थी।

यह सुनिश्चित नहीं किया जा सकता है कि क्या बग को 4.2 में पेश किया गया था या यदि बग को <4.2 पर त्रुटि की कमी थी और यह 4.2 पर हल हो गया।

त्रुटि: ExpChanChangedAfterItHasBeenCheckedError
उपाय:
componentRef.changeDetectorRef.detectChanges ();

नीचे मेरे कोड का एक टुकड़ा है (गतिशील रूप से उत्पन्न घटक):
ComponentsRef = viewContainerRef.createComponent (ComponentsFactory); // घटक बन गया
(ComponentsRef.instance) .डाटा = input_data; // मैन्युअल रूप से घटक डेटा यहाँ पर बदल रहा है
componentRef.changeDetectorRef.detectChanges (); // इसका परिणाम परिवर्तन का पता लगाने में होगा

सरल घटकों के लिए बस Google "कंपोनेंट रीफ" का उपयोग कैसे करें और फिर निष्पादित करें
componentRef.changeDetectorRef.detectChanges ();
घटक डेटा / मॉडल को बदलने / बदलने के बाद।

समाधान 2:
"This.dialog.open (DialogComponent)" एक संवाद खोलने के दौरान मुझे फिर से यह त्रुटि मिली।
इसलिए इस खुले डायलॉग कोड को एक फंक्शन के अंदर डालकर फिर उस फंक्शन पर सेटटाइमआउट () लगाने से समस्या हल हो गई।
उदाहरण के लिए:
OpenDialog () {
letRRef = this.dialog.open (DialogComponent);
}
ngOnInit (): शून्य {
setTimeout () (> = this.openDialog (), 0);
}
हालांकि यह हैक की तरह लगता है .. काम करता है !!!

4.2 के बाद से मेरे पास एक ही समस्या है और मेरे लिए कोई समाधान या वर्कअराउंड काम नहीं किया गया है :( मैं एक घटक का निर्माण एक घटक कारखाने के साथ एक ngAfterViewInit विधि में करता हूं। यह घटक एक निर्देश का उपयोग करता है जिसमें @Input() फ़ील्ड होता है। मैं इसे बांधता हूं। स्थैतिक स्ट्रिंग के लिए फ़ील्ड। ऐसा लगता है कि निर्देश के @Input() फ़ील्ड को तब तक अपरिभाषित किया जाता है जब तक कि घटक का दृश्य निर्माण और जाँच नहीं किया गया था और केवल तब स्थिर स्ट्रिंग के साथ प्रारंभ किया गया था।

https://plnkr.co/edit/E7wBQXm8CVnYypuUrPZd?p=info

staticComponent.ts

export class StaticComponent implements AfterViewInit {
  @ViewChild('dynamicContent', {read: ViewContainerRef})
  dynamicContent: ViewContainerRef;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

  ngAfterViewInit(): void {
    const componentFactory: ComponentFactory<DynamicComponent> = this.componentFactoryResolver.resolveComponentFactory(DynamicComponent);
    this.dynamicContent.createComponent(componentFactory);
  }
}

test.directive.ts

@Directive({
  selector: '[testDirective]'
})
export class TestDirective {
  @Input()
  testDirective: string;
}

dynamic.component.ts

@Component({
  selector: 'dynamic-component',
  template: `<div [testDirective]="'test'">XXX</div>`
})
export class DynamicComponent {
}

त्रुटि: एक्सप्रेशनचैनडैग आफ्टर इटहैसबैनचेकडेलर: एक्सप्रेशन बदल जाने के बाद यह बदल गया है। पिछला मान: 'अपरिभाषित'। वर्तमान मूल्य: 'परीक्षण'। ऐसा लगता है कि यह दृश्य इसके माता-पिता और उसके बच्चों के गंदे होने के बाद बनाया गया है। क्या यह परिवर्तन का पता लगाने वाले हुक में बनाया गया है?

मैं इस धागे को पढ़कर थोड़ा भ्रमित हूं। क्या यह एक ज्ञात बग है, जिसे आगामी रिलीज में हल किया जाएगा? या, यह अपेक्षित व्यवहार है? यदि हां, तो समाधान क्या है? धन्यवाद।

कोई विचार नहीं अगर यह संबंधित है या नहीं, लेकिन मैं एक जुनून के साथ इस संदेश से नफरत करता हूं! यह केवल मेरे लिए दिखाता है जब बॉक्स 'एनजी टेस्ट' कमांड के बाहर इकाई परीक्षण होता है। मुझे लगता है कि मैं सिर्फ एक सरल सेवा का सफलतापूर्वक मजाक करने के बारे में भ्रमित हो सकता हूं। यह भी आश्चर्य की बात है कि किसी और ने इसे अभी तक परीक्षण में नहीं देखा है, परीक्षण से संबंधित कुछ भी नहीं पा सकता है। मैं इस विषय और ExpressionChangedAfterItHasBeenCheckedError + इकाई परीक्षण के लिए किसी भी खोज देख रहा हूँ।

मैं एक plnkr को एक साथ रखने की कोशिश कर रहा हूं, और त्रुटि को पुन: उत्पन्न करने के लिए बहुत मुश्किल लग रहा है - हालांकि, व्यापक डिबगिंग है, मुझे लगता है, मुझे यह देखने में थोड़ा करीब है कि क्या गलत हो रहा है (हालांकि यह बग नहीं है, यह तय करना या मेरी ओर से कोई गलती)।

मैंने उसी रेड्यूसर के कट डाउन संस्करणों का उपयोग करके एक छोटा सा नमूना ऐप बनाया, जो कि वास्तविक ऐप के समान ही है, जिसमें राउटररेडर अंतिम है। मेरी हताशा के लिए, त्रुटि उत्पन्न नहीं हुई। इसलिए मैंने ब्रेकपॉइंट्स सेट किए और रिड्यूसर्स के माध्यम से क्रियाओं के प्रवाह को देखा। मैंने पाया कि दो ऐप उल्टे क्रम में कार्रवाई भेज रहे थे।

मेरा UI reducer दृश्यता का प्रबंधन करता है, और राज्य परिवर्तन का स्रोत है जो त्रुटि को ट्रिगर कर रहा है। यहां रिड्यूसर का कट-डाउन संस्करण है, जो संबंधित क्रियाओं को दिखा रहा है:

export const userInterfaceReducer = (state = INITIAL_UI(), action: any) => {
    switch (action.type) {
        case IngredientActions.LIST_INGREDIENTS:
            if (action.hideTypes) {
                return Object.assign(state, { visiblePanel: VisiblePanel.Ingredients });
            }
            return state;
        default:
            return state;
    }
}

जब मैं अपने छोटे परीक्षण ऐप में इसे चलाता हूं, तो यह काम करता है - सबसे पहले, LIST_INGREDIENTS एक्शन आग और नया राज्य वापस आ जाता है; फिर @ कोणीय-रिडक्स / राउटर :: UPDATE_LOCATION एक्शन फायर करता है, और डिफ़ॉल्ट केस हिट होता है, उसी स्थिति में वापस लौटता है।

जब मैं इसे वास्तविक ऐप में चलाता हूं, तो ऑर्डर या क्रियाएं उलट जाती हैं। @ कोणीय-रिडक्स / राउटर :: UPDATE_LOCATION क्रिया पहले आग लगाती है, डिफ़ॉल्ट रूप से पुरानी स्थिति लौटाती है। फिर LIST_INGREDIENTS फायर करता है, नई (परिवर्तित) स्थिति लौटाता है - और त्रुटि को उठाया जाता है।

मैं इस विचार के लिए पूरी तरह से खुला हूं कि मैंने कुछ गूंगा किया है और यह एक वास्तविक बग नहीं है - लेकिन यदि ऐसा है, तो क्या कोई और देखता है कि मैंने क्या किया है?

(एक फुटनोट के रूप में, मैंने 4.1.3 संस्करण की जाँच की ... और यह 'सही' क्रम में रिड्यूस रिड्यूसर को भी निकालता है - अर्थात्, स्थान परिवर्तन सूची सामग्री की कार्रवाई के बाद आग लगाता है, जो संभवतः इसीलिए काम करता है, लेकिन 4.2 संस्करण नहीं है)।

जब एक घटक सेवा की संपत्ति को बदलता है तो उसी कष्टप्रद बग को पीड़ित करना। मूल घटक को * ngIf ले जाकर हल किया गया। तो यह निश्चित रूप से एक बग है

यह ngDoCheck () पद्धति का उपयोग करके और ChangeDetectorRef.detectChanges विधि का उपयोग करके काम करने में सक्षम था।

public ngDoCheck(): void {
    this.cdr.detectChanges();
}

@pappacurds ऐसा मत करो। आपने उसके साथ एक अनंत परिवर्तन जांच चक्र का कारण बना है।

यहाँ वही त्रुटि हो सकती है https://plnkr.co/edit/IeHrTX0qil17JK3P4GBb?p=preview

त्रुटि: previous undefined after undefiend

उसी त्रुटि को अद्यतन करने के बाद

मेरे लिए भी वैसा ही

4.0.0 में सब कुछ ठीक है, 4.2.6 में अपग्रेड करने के बाद मुझे वही त्रुटि मिलती है।

लेख आपको ExpressionChangedAfterItHasBeenCheckedError त्रुटि के बारे में जानने की आवश्यकता है जो यह बताता है कि यह त्रुटि क्यों होती है और संभावित सुधार

फ़िक्सेस स्पष्ट हैं, लेकिन इस तरह से फ्रेमवर्क को बदलना कि अपडेट के कारण उपयोगकर्ता एप्लिकेशन को नए "छोटे" प्लेटफ़ॉर्म अपडेट के "समर्थन" के लिए फिर से लिखना होगा। JS अभी भी संगतता बनाए रखने के लिए पुरानी गलतियों को बनाए हुए है ...

वही त्रुटि यहाँ

मैं इस मुद्दे को ~4.2.4 में भी देख रहा हूं। ~4.1.3 अपग्रेड करने से समस्या हल हो गई।

जारी करने की मूल्यों में परिवर्तन के साथ है ContentChildren यहाँ तक कि जब का उपयोग कर, ChangeDetectorRef detectChanges() के अंत में AfterViewInit माता पिता की (जहां यह बदलाव करने गया था)। अजीब तरह से यह मुद्दा केवल घटकों के साथ होता है न कि निर्देशों के साथ। मैंने एक निर्देश परिवर्तित किया कि मैंने <ng-content></ng-content> 4.2.4 में ExpressionChangedAfterItHasBeenCheckedError त्रुटि फेंकना शुरू कर दिया।

सामग्री 2 इनपुट नियंत्रण के साथ काम करते समय मुझे यह मिला। इसके मूल्य को निर्धारित करने की कोशिश की

ngAfterViewInit(): void {
this.numberFormControl.setValue(200);
}

मैंने एक साधारण प्लंकर को एक मामले में दिखाया है जिसमें ExpressionChangedAfterItHasBeenCheckedError त्रुटियां दिखाई देने लगी हैं, जो केवल Angular 4.2.x साथ शुरू हुई हैं।

मैंने पैरेंट घटक के ngAfterViewInit ChangeDetectorRef detectChanges() का उपयोग करने पर भी ContentChild का मान बदलते समय त्रुटि दिखाने वाला एक सरल प्लंकर बनाया है।

संपादित करें: मेरे पहले उदाहरण के आधार पर सरल प्लंकर भी बनाया गया है, लेकिन घटक के बजाय मूल निर्देश के साथ और कोई त्रुटि नहीं है।

@saverett मुझे आपकी दे रहा है

@ जेमाइक मेरे पास आपके प्लंकर के मामले में बिल्कुल वैसा ही था (कोड चारों ओर से लपेटकर काम किया गया था, जिसमें ContentChild setTimeout , plunker का संदर्भ दिया गया था )

@ जैमिसिक ने सिर ऊपर करने के लिए धन्यवाद दिया। कोणीय / ज़ोन के साथ एक समस्या की तरह दिखता है। # 832। मैंने अब तक के लिए जोन .js संस्करण को 0.8.12 पर सेट किया है, जब तक कि वे नवीनतम ज़ोन को ठीक नहीं करते हैं। प्लंकर को फिर से काम करना चाहिए।

@matkokvesic वास्तव में एक समाधान नहीं है, जो जीवन चक्र हुक के बाहर होने वाले परिवर्तन का कारण बनता है। कोणीय v4.1.3 का उपयोग करते समय प्रदान किया गया कोड उदाहरण त्रुटि का कारण नहीं बनता है

@ जेमाइक मैं सहमत हूं, यह एक अस्थायी समाधान है। द्वारा संदर्भित तत्वों का उपयोग कर ContentChildren में ngAfterViewInit ठीक पहले कोणीय 4.2.6 काम कर रहा था।

मैंने https://github.com/angular/angular/issues/17572#issuecomment -311589290 में वर्णित बग के लिए एक प्लंकर बनाया

https://plnkr.co/edit/E7wBQXm8CVnYypuUrPZd?p=info

मैंने अपने कोड में changeDetection: ChangeDetectionStrategy.OnPush और this.changeDetector.markForCheck(); का उपयोग करके इसे ठीक किया है

@touqeershafi यदि आप this.changeDetector.markForCheck(); का उपयोग करते हैं तो इसका मतलब यह नहीं है कि आप चीजों का सही तरीके से उपयोग नहीं कर रहे हैं

यह अभी भी हो रहा है। यह निश्चित रूप से एक बग है, अपेक्षित व्यवहार नहीं है और इसे ठीक किया जाना चाहिए।

@istiti मैं समझता हूं कि यह एक उचित तरीका नहीं है, लेकिन कम से कम आप इस त्रुटि से अस्थायी रूप से छुटकारा पा सकते हैं, लेकिन जहां तक ​​मेरी परियोजना की चिंता है, मैंने बग url के साथ TODO जोड़ा है।

यह अभी भी हो रहा है। यह निश्चित रूप से एक बग है, अपेक्षित व्यवहार नहीं है और इसे ठीक किया जाना चाहिए।

मुझे लगता है कि मुझे @rwngallego से सहमत 4.2.x अपडेट से पहले, मैंने पहले से ही कई पुन: प्रयोज्य / एनजी-कंटेंट स्टेली घटकों को लिखा था जो @ContentChildren पर निर्भर करते हैं और इनके माध्यम से माता-पिता और बच्चे के बीच संबंध बनाते हैं चैनल (संपत्तियाँ प्राप्त करना और आगे बढ़ना)।

मैं खुद को लगातार इन सभी कंस्ट्रक्टर्स (चाइल्ड क्लासेस जो इस घटक को बढ़ाता हूं) सहित इन सभी में ChangeDetectorRef इंस्टेंस को इंजेक्ट करने के लिए मिल रहा हूं, और यह इच्छित या सही व्यवहार नहीं लगता है।

@Saverett (राउटर का उपयोग डायनेमिक घटक का उपयोग कर रहा है) जैसे गतिशील घटक का उपयोग करने वाले लोगों के लिए, मुझे लगता है कि यह यहाँ बताई गई समस्या है https://github.com/angular/angular/issues/15634।

ngAfterViewInit / ngAfterViewChecked अंदर परिवर्तन करने वाले किसी भी व्यक्ति के लिए मुझे लगता है कि यह अपेक्षित है।

दूसरों के लिए, (यहाँ अभी तक कोई नहीं देखा है) यह अभी भी मेरे लिए एक रहस्य है।

यह निम्नलिखित परिदृश्य में मेरे लिए हो रहा है।
एक मूल घटक है जो एक बाल घटक का उपयोग करता है। चाइल्ड कंपोनेंट को ऐसे डेटा की आवश्यकता होती है जो अभिभावक आपूर्ति करेंगे लेकिन यह डेटा पेरेंट कंस्ट्रक्टर में एक वादा परिणाम से आ रहा है। इसलिए:

माता-पिता

constructor {
dataservice.getData().then((result) => {
this.source = result;
});
}

अभिभावक टेम्पलेट

<app-child [source]="source"></app-child>

बाल घटक

@Input() source:any[];

यह कोड इस त्रुटि को फेंकता है लेकिन इसे मूल घटक में जोड़ने से समस्या हल हो जाती है:

constructor(private cdRef: ChangeDetectorRef) {
dataservice.getData().then((result) => {
this.source = result;
 this.cdRef.detectChanges();
});
    }

अब यह एक अनुशंसित समाधान है या यह बग के लिए एक समाधान है और इस तरह के परिवर्तन होने के निहितार्थ क्या होंगे? मुझे ऐसा लगता है कि आप कोणीय को उन परिवर्तनों का पता लगाने के लिए कह रहे हैं जो मुझे लगता है कि कुछ ऐसा है जिससे आपको बचना चाहिए ...

@sulhome ... आपकी समस्या यह है कि माता-पिता के निर्माता में वादा @Input बच्चे घटक पर ... सीडी चक्र के दौरान और देव मोड में इसकी पुष्टि बदल रहा है। यही त्रुटि का कारण है।

लाइन this.cdRef.detectChanges(); दूसरा सीडी चक्र जोड़ता है इसलिए पुष्टि के बाद यह रसीला और => कोई त्रुटि नहीं है।

तो सब कुछ उम्मीद के मुताबिक काम करता है। इस प्रकार की समस्याओं से बचने के लिए यह समझना महत्वपूर्ण है कि यह आपके कोड में सही निर्माण और सामान्य तर्क का उपयोग कैसे करता है। आप इसके बारे में यहाँ गहरी व्याख्या में पढ़ सकते हैं: https://hackernoon.com/everything-you-need-to-know-about-the-expressionchangedafterithasbebeencheckederror-error-3fd9ce7db4

@ mlc-mlapis इसलिए आप कह रहे हैं कि मैं इसे this.cdRef.detectChanges(); जोड़कर सही कर रहा हूं और इसका कोई निहितार्थ नहीं है?
मैंने सोचा था कि बच्चे पर ngOnChanges सुनने के बाद मुझे माता-पिता से @Input में बदलाव को चुनना चाहिए। क्या यह करने के लिए सही दृष्टिकोण नहीं है? कृपया ध्यान दें कि मैंने ऐसा किया है और मैं अभी भी त्रुटि प्राप्त कर रहा था लेकिन मुझे लगा कि ngOnChanges लिए डिज़ाइन किया गया है

@sulhome हाँ, this.cdRef.detectChanges(); वह है जो मदद करता है, लेकिन इसका परिणाम यह भी है कि आपके पास अभी 2 सीडी हैं ... इसलिए यह निर्भर करता है कि आप किस तरह और कैसे OnPush रणनीति का उपयोग घटकों के उपरि खत्म करने के लिए कर रहे हैं एक और सीडी चक्र।

यदि यह सच है कि dataservice.getData http का उपयोग करके कुछ डेटा लेता है, तो शायद सबसे आसान समाधान उस सेवा में एक अवलोकन योग्य होगा और बच्चे के घटक से उसे प्राप्त करना होगा। तो जब डेटा स्ट्रीम पर उत्सर्जित किया जाएगा तो बच्चा उस पर प्रतिक्रिया कर सकता है।

रिकॉर्ड के लिए @ghetolay , कुछ मामले हैं जब यह एक बग है, उदाहरण के लिए # 18129 देखें जो मैंने खोला था।

मेरे पास यह समस्या है जब मुझे @Output के साथ चाइल्ड कंपोनेंट से डेटा मिलता है।

माता-पिता के घर पर

drag_second(trigger){ console.log("dragged222222"+trigger); if(trigger){ this.isactive=true; }else{ this.isactive=false; } }
और home.html
<div class="upper" [ngClass]="{'isactive':isactive}">

isactive को तब बदला जाता है जब ड्रैगस्टार्ट और ड्रैगेंड…।

त्रुटि संदेश है
ExpressionChangedAfterItHasBeenCheckedError: इसकी जाँच के बाद अभिव्यक्ति बदल गई है। पिछला मान: 'सत्य'। वर्तमान मूल्य: 'गलत'।

या क्या कोई अन्य तरीका है जिससे मैं वर्ग विशेषता को बदल / जोड़ सकता हूं?

४.२.x और ४.३.० में समान अंक लेकिन ४.१.x नहीं।

त्रुटि केवल उन मार्गों पर होती है जो ng-template ।

समाधान: ngAfterViewInit में सभी कोड डालकर setTimeout ने मेरे लिए समस्या हल कर दी (धन्यवाद / क्रेडिट @jingglang के लिए)।

public ngAfterViewInit(): void {
    setTimeout(() => {
        //my code
    });
}

@Wernerson , सेट टाइमआउट के बारे में

मेरी समस्या यह है कि मैं का इस्तेमाल किया था ActivatedRoute के params Observable में कुछ राज्य संशोधित करने के लिए ngOnInit() । ऐसा लगता है, कि Router params सिंक्रनाइज़ करता है, इसलिए अद्यतन CD के दौरान होता है।
इस के लिए मेरा सरल समाधान वर्तमान में है:

  // !!! see delay(0)
  // results are consumed by async Pipe, where I also had the CD issue (null vs. undefined)
  this.results = this._activatedRoute.params.delay(0)
    .do(params => this.searchParameters = this._createSearchParameters(params))
    .switchMap(p => {
      let key = this.searchParameters.key();
      return this._searchResultCache.results.map(r => r.get(key));
    });

(मुझे पता है कि यह सबसे सुंदर प्रतिक्रियाशील / कार्यात्मक कोड नहीं है;))
तो समाधान delay(0) पैरामीटर का उत्सर्जन एक tick ।

आशा है कि मैं समान मुद्दों वाले अन्य लोगों के लिए मदद कर सकता हूं।
साथ ही किसी भी चिंता का स्वागत किया जाता है कि कैसे मेरा समाधान गलत या खतरनाक है।

इस मुद्दे की स्थिति क्या है? यह अभी भी एंगुलर 4.2.6 में स्पष्ट है।
क्या यह उत्पादन में समस्या है? चूंकि यह त्रुटि केवल डीबग बिल्ड में होगी।

मैं मैन्युअल रूप से परिवर्तन का पता लगाने के साथ सभी वर्कअराउंड से नफरत करता हूं, या यहां तक ​​कि इसे सेटटाइमआउट () में चला रहा हूं ...

setTimeout() अक्षम है, क्योंकि यह पूरे एप्लिकेशन पर एक नए परिवर्तन का पता लगाने के चक्र का कारण बनता है, जबकि detectChanges() केवल वर्तमान घटक AFAIK की जांच करता है।

मेरी टीम को एक गलतफहमी थी कि ngOnInit क्या है और क्या नहीं। डॉक्स का कहना है

ngOnInit() : एंगुलर के बाद निर्देश / घटक को प्रारंभ में डेटा-बाउंड गुण प्रदर्शित करता है और पहले ngOnChanges () के बाद निर्देश / घटक के इनपुट गुण सेट करता है।

हम ngOnInit से हमारी सेवाओं (जो कि एप्लिकेशन स्थिति का ट्रैक रखते हैं) की सदस्यता ले रहे थे। हमारी सदस्यताएँ समकालिक व्यवहार हैं; वे सदस्यता के समय आग लगाते हैं। इसलिए "कोणीय पहले के बाद ... निर्देश / घटक के इनपुट गुण सेट करता है", हम तुरंत मूल्यों को बदल रहे थे। यहाँ एक बहुत ही सरल प्लंकर चित्रण है जो एक समस्या है।

टूर ऑफ हीरोज में उदाहरण अंततः http का उपयोग करता है जो अतुल्यकालिक है , और इसलिए मुद्दों का कारण नहीं बनता है। मुझे लगता है कि यह हमारी उलझन का स्रोत है।

अब हम जो कुछ भी कर रहे हैं, वह हमारे कंस्ट्रक्टर के बजाय हमारे सिंक्रोनस स्टेट्स को सब्सक्राइब कर रहा है, ताकि हमारे कंपोनेंट्स की वैल्यू तुरंत सेट हो जाए। इस थ्रेड के अन्य लोगों ने टाइमआउट्स के माध्यम से एक दूसरे परिवर्तन का पता लगाने, बाद में मान सेट करने, या स्पष्ट रूप से ऐसा करने के लिए कोणीय बताने का सुझाव दिया है। ऐसा करने से त्रुटि दिखाई नहीं देगी, लेकिन यह शायद अनावश्यक है।

@Maximusk ने जो लेख साझा किया है वह अवश्य पढ़ें : ExpressionChangedAfterItHasBeenCheckedError त्रुटि के बारे में आपको जो कुछ भी जानना है ।

यदि और कुछ नहीं है, तो इस धागे को आधिकारिक कोणीय डॉक्स में इस सब की गहराई से चेतावनी दी जानी चाहिए।

@Maximusk ने जो लेख साझा किया है वह अवश्य पढ़ें: ExpressionChangedAfterItHasBeenCheckedError त्रुटि के बारे में आपको जो कुछ भी जानना है वह सब कुछ है।

धन्यवाद

@adamdport

क्या माता-पिता से बाल संपत्तियों को संशोधित करने के लिए @ViewChildren @ContentChildren का उपयोग करने के मामले में यह काम करता है, क्योंकि जब तक ngAfterViewInit () जीवनचक्र को निष्पादित नहीं किया गया है, तब तक बच्चे उपलब्ध नहीं होते हैं?

कृपया ध्यान रखें कि इस मुद्दे का एक हिस्सा एक पुष्टि बग है और उपयोगकर्ता की गलती नहीं है:
https://github.com/angular/angular/issues/15634

समस्या @saverett संबोधित सही है, *ngIf का उपयोग त्रुटि पैदा कर रहा था।

*देख रहे...

यह तब हो सकता है जब आप ऑब्जेक्ट को एक कोणीय सामग्री संवाद में पास करते हैं और फिर संवाद में this.myDataInput = Object.assign({}, dialogDataInput) करने के बजाय सीधे उनका उपयोग करते हैं। यानी this.myDataInput = dialogDataInput; और फिर this.myDataInput.isDefault = !this.myDataInput.isDefault; जैसा कुछ करना। जैसा कि ऊपर बताया गया है, चाइल्ड कंपोनेंट (डायलॉग) उन मानों को बदल रहा है जो पैरेंट घटक के दृष्टिकोण में उजागर होते हैं।

विशेषता को बदलें [विशेषता]

क्या किसी को यकीन है कि यह एक त्रुटि या बग है?
क्या ngOnInit में डेटा लोड करना सही नहीं है? क्योंकि अगर मैं कोड को कंस्ट्रक्टर (एक ऑब्जर्वेबल के माध्यम से लोड करना) ले जाता हूं, तो त्रुटि नहीं डाली गई है ...

@ सहकर्मी । क्या आपके html में * ngIf है? सावधान रहें कि ngOnInit समाप्त होने के बाद चीजें प्रदान की जा रही हैं, सोलांग, * ngIf के अंदर सब कुछ काम नहीं करेगा और इस त्रुटि को जन्म दे सकता है।

इसे फिर से काम करना होगा। "NgIf" और कस्टम नियंत्रणों के साथ आपको यह त्रुटि संदेश मिलता है। टाइमआउट निश्चित रूप से एक समाधान नहीं है।

@ j-nord यदि आप टिप्पणियां पढ़ेंगे, तो आप जानेंगे कि timeout आवश्यक नहीं है।

@ j-nord / @dgroh मैंने वही अनुभव किया है। मैं एक एनजी-हिंट का उपयोग कर रहा हूं जो एक एनजीआई निर्देश का उपयोग करता है और मैं इस त्रुटि से छुटकारा नहीं पा सकता हूं। क्या आपने वर्कअराउंड लागू करने का प्रबंधन किया था?

@Wernerson हाँ, इस मुद्दे का एक हिस्सा एक त्रुटि या बग है: https://github.com/angular/angular/issues/15634

@ mawo87 यह मेरे लिए छिपा हुआ काम करता है क्योंकि यह DOM से एलिमेंट नहीं हटाता है। हमारी आवश्यकता के लिए यह ठीक था और एक स्वच्छ समाधान भी था।

@ mawo87
सबसे पहले आपको वैरिएबल को ढूंढना है जो कि एरर मैसेज के द्वारा होता है। @ भाषा टीम : त्रुटि संदेश में चर का नाम होना अच्छा होगा। बड़े मास्क और वेबपैक द्वारा इसे खोजना आसान नहीं है। यदि आपको वह कमांड मिला जहां यह होता है, तो फॉलो लाइन में कमांड मदद करेगा:

this.cdr.detectionChanges();

19. सिंदूर से सिंदूर 928 से उदाहरण देखें

धन्यवाद @dgroh और @ j-nord
@ j-nord मैं डिटेक्शनचेंज विधि को भी देख रहा था, लेकिन मैं इस दृष्टिकोण का उपयोग नहीं कर सकता क्योंकि निम्नलिखित लेख में इसके खिलाफ सलाह दी गई थी:
https://hackernoon.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4

मेरे मामले में, मैं एक PageTitle सेवा का उपयोग कर रहा हूं और मूल घटक में इसकी सदस्यता लेता हूं, और फिर जैसे ही बाल घटक लोड होते हैं, वे PageTitle को सेवा में सेट करते हैं और अभिभावक को मान मिलता है और सदस्यता के माध्यम से प्रदर्शित होता है। यह 4.1.x में किसी भी त्रुटि के बिना काम करता है, लेकिन 4.2x और बाद में एक्सप्रेशनचेंज किए गए ItHasBeenCheckedError त्रुटि को फेंकता है।

सब कुछ अभी भी उम्मीद के मुताबिक काम करता है, और त्रुटियों को तैनात / उत्पादन बिल्ड (दूसरे परिवर्तन का पता लगाने के चक्र की कमी के कारण) में प्रदर्शित नहीं होता है, लेकिन विकास में मेरे कंसोल में बहुत अधिक लाल है।

मैं अभी भी बहुत स्पष्ट नहीं हूँ कि उपयुक्त (अल्पावधि) फिक्स क्या है। मेरे माता-पिता घटक सदस्यता निर्माता में हैं, और सेवा के माध्यम से बच्चे के घटक अपडेट ngOnInit में हैं।

मैंने, सब कुछ आपके बारे में जानने की जरूरत है ... ’पोस्ट पढ़ा है, जो जानकारीपूर्ण था, लेकिन मुझे विश्वास नहीं दिलाता है कि मैं कुछ भी गलत कर रहा हूं, और समस्या का समाधान प्रदान नहीं करता है।

@alignsoft अगर आप ngOnInit में बच्चे के घटकों में पेजेटल सेट करेंगे, तो मेरा मानना ​​है कि त्रुटि वैध है ... उस लेख को देखें जो पहले लिंक किया गया था।

@alignsoft मैं सहमत हूं, इस त्रुटि के चारों ओर बहुत चर्चा हुई है, लेकिन वास्तविक वैध निर्देश के बिना कि क्या इसकी वैधता है या नहीं ... क्या यह मानकों और डेटा बाइंडिंग / हेरफेर के बारे में देव को "चेतावनी" है?

मेरे विशिष्ट मामले में, मैं माता-पिता / बच्चे के घटकों के साथ @ViewChild और @ContentChild का उपयोग कर काम कर रहा हूं, ताकि कंसोल में दिखाने से त्रुटि को रोकने के लिए DetChanges () से अधिक और कॉल कर सकें ...

@rolandoldengarm मैंने पैरेंट कंस्ट्रक्टर में सदस्यता लेने और चाइल्ड घटकों में AfterViewInit में मान सेट करने और अभी भी त्रुटि प्राप्त करने की कोशिश की है। क्या प्रवाह और परिवर्तन का पता लगाने के चक्र के आधार पर इसे संभालने का सही तरीका है, और त्रुटि संभावित रूप से बग है?

कृपया, यहाँ किसी प्रकार का आधिकारिक उत्तर देना बहुत अच्छा होगा ...

इसे फिर से देखना। मेरा उदाहरण https://github.com/angular/angular/issues/17572#issuecomment -315096085 से दिखता है
का उपयोग करते हुए किया जाना चाहिए था AfterContentInit के बजाय AfterViewInit जब घटक जीवन चक्र के हिस्से के रूप ContentChildren हेरफेर करने के लिए कोशिश कर रहा।

यहाँ AfterContentInit के साथ अद्यतन किया गया plnkr और कोई और अधिक त्रुटि नहीं है: http://plnkr.co/edit/rkjTmqclHmqmpuwlD0Y9?p=preview

@ जेमाइक I ने AfterViewInit से AfterContentInit बदला, फिर भी वही त्रुटि। यहां तक ​​कि अगर मैं अपना डेटा OnInit के अंदर अपडेट करता हूं तो त्रुटि होती है। जहाँ तक मुझे पता है कि यह OnInit दौरान डेटा इनिशियलाइज़ करने के लिए Angular जीवनचक्र सही (right?) के अनुसार है। इस तथ्य के साथ कि पिछले संस्करणों में यह त्रुटि नहीं हुई, मुझे लगता है कि यह एक बग है। हालाँकि मैं चाहूंगा कि अगर ऐसा है तो विकास टीम की ओर से किसी तरह का बयान दिया जाए ..? : डी

आप के अंदर डेटा नहीं अद्यतन करने जाना चाहिए @Wernerson ngOnInit जब तक डेटा है कि जीवन चक्र हुक पर उपलब्ध है। आपको अपना तर्क ngAfterContentInit में होना चाहिए, अगर उसे सामग्री बच्चों के साथ करना है।

@JSMike ने मदद नहीं की, त्रुटि अभी भी बनी हुई है। मैं सिर्फ ngAfterContentInit में अनुरोध किए गए डेटा (अतुल्यकालिक) प्राप्त करने के बाद आवेदन में एक राज्य परिवर्तन की सदस्यता लेता हूं।

@ क्या आप एक plnkr उदाहरण है?

StackBlitz के साथ मूल नमूना
एक बच्चा घटक एक घटना का उत्सर्जन करता है और स्थानीय चर को अद्यतन करने वाला मूल घटक।
Js कंसोल में त्रुटि प्राप्त करें:
ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: 'hello world'.

पता चला, ngAfterContentInit केवल काम करता है अगर बच्चे स्थिर हैं, यह तब भी विफल रहता है जब *ngFor http://plnkr.co/edit/rkjTmqclHmqmpuwitD0Y9?p=preview का उपयोग करके बच्चे पैदा करते हैं

@soldiertt आपको केवल पता लगाने की आवश्यकता हैचेंज () https://stackblitz.com/edit/angular-qfu74y

@ जेमाइक यदि मैं ऐसा करता हूं, तो ngAfterView बच्चे के घटक को ट्रिगर नहीं किया जाता है: https://stackblitz.com/edit/angular-bdwmgf

@soldiertt जो अजीब लगता है, लेकिन एक अलग मुद्दे की तरह दिखता है जिसे रिपोर्ट किया जाना चाहिए।

@ जेमाइक मेरा सेटअप सेवाओं, तीसरे पक्ष के पुस्तकालयों, गोपनीय जानकारी, आदि के साथ काफी जटिल है। दुर्भाग्य से मैं एक प्लंकर में बग को पुन: पेश नहीं कर सका: /

ChangeDetectorRef का इंजेक्शन मेरे लिए काम करता है!

मेरे पास एक हिंडोला में यह मुद्दा है, क्योंकि मुझे हिंडोला आइटम घटक पर कुछ संपत्ति निर्धारित करने की आवश्यकता है, संपत्ति जिसे केवल मूल हिंडोला घटक में गणना के बाद जाना जाता है। और सभी आइटम ng-content माध्यम से आ रहे हैं, इसलिए मैं केवल पेरेंट हिंडोला घटक के ngAfterContentInit में आइटम के साथ काम कर सकता हूं। कुछ इस तरह:
हिंडोला:

@ContentChildren(ItemComponent) carouselItems;

ngAfterContentInit() {
  // ... some computations
  this.carouselItems.forEach((item: ItemComponent, currentIndex) => {
    item.setPropertyX(someComputedValue);
    // OR:
    item.x = someComputedValue; // of course, this would work as well
  });
}

आइटम:

setPropertyX(value) {
  this.x = value;
}

setTimeout() हैक के अलावा , क्या एक सेवा और एक विषय का उपयोग करने के लिए केवल अन्य समाधान होगा जो माता-पिता हिंडोला के साथ संवाद करता है? मेरा मतलब है कि यह हास्यास्पद होगा ... इसका मतलब यह होगा कि, अगर मेरे पास एक हिंडोला में 100 आइटम हैं, तो मेरे पास 100 सदस्यताएँ होंगी। और अगर मैं 2 हिंडोला है तो दोगुना हो जाता है। निश्चित रूप से यह अनुशंसित तरीका नहीं हो सकता है ?! सही?

अधिक बार नहीं, हमें अपने घटकों पर कुछ गुण सेट करने की आवश्यकता होगी, ऐसे गुण जिन्हें AfterContentInit से पहले नहीं जाना जा सकता है ... और कई मामलों में (जब हम 1 या 2 घटकों के बारे में बात नहीं कर रहे हैं जैसे वह, बल्कि 50 या 100 (जैसे हिंडोला में) दसवीं या सैकड़ों सदस्यता वाले व्यक्ति हास्यास्पद होंगे।

क्या वास्तव में कोणीय का कुछ अच्छा हिस्सा है जो मुझे यहाँ मदद कर सकता है, जो मैंने अभी तक नहीं खोजा है?

PS मैंने ChangeDetectorRef का इंजेक्शन लगाने और हिंडोला घटक और आइटम घटक दोनों पर detach() उपयोग करने की भी कोशिश की है। मुझे उम्मीद है कि इस त्रुटि को ठीक करने के बाद से, अच्छा होगा ... मैं मूल रूप से कह रहा हूं "_screw परिवर्तन का पता लगाने, मुझे वास्तव में इसकी आवश्यकता नहीं है। कृपया, सुंदर कृपया: किसी भी परिवर्तन का पता न लगाएं _" ... लेकिन त्रुटि अभी भी फेंक दी गई है! तो, detach() पद्धति का क्या मतलब है, अगर यह ऐसा नहीं करता है जो यह कहता है?

constructor(private cdr: ChangeDetectorRef) {
  this.cdr.detach();
}

setTimeout() आवश्यक नहीं है एक हैक यह उदाहरण के लिए चीजों को करने का बहुत ही मान्य तरीका हो सकता है जब आप इसे अपडेट करने के लिए देखने के लिए प्रतिक्रिया करते हैं जैसे: ngAfterViewInit दौरान टेम्पलेट के बाइंडिंग बदलना।

समस्या यह है कि जब आप वास्तव में जाने क्यों बिना जादू के रूप में इसका उपयोग करते हैं। लेकिन पूरी तरह से वैध परिदृश्य हैं जहां setTimeout() का उपयोग करना उचित तरीका है।

@ghetolay क्या यह घटक के जीवनचक्र को तोड़ने के लिए

@fugwenna

क्या घटक (एस) के जीवनचक्र को तोड़ना हैकिंग नहीं है, परिवर्तन का पता लगाने वाला सिस्टम विकसित हो रहा है?

मैं उस सवाल को नहीं समझता। जीवनचक्र से बाहर?

कोणीय हर बार सीडी का एक दौर चलाएगा जब एक async घटनाओं होती है (डोम घटना, xhr, setTimeout आदि ..), उस सीडी के दौरान यह दृश्य को अद्यतन करेगा। ngAfterViewInit हुक उसके बाद चलाया जाता है ताकि कोई और सीडी चलाने की योजना न हो और यह तब तक फिर से चालू न हो जाए जब तक कि एक और एसिंक्स घटना न हो जाए। setTimeout() का उपयोग करना इसे फिर से ट्रिगर करने का सबसे सरल तरीका है। आप निश्चित रूप से इसे स्वयं कर सकते हैं लेकिन मुझे लगता है कि लाभ नगण्य हैं।

@ghetolay मैं @JSMike और मेरे द्वारा पढ़े गए कुछ अन्य सूत्र से टिप्पणी का संदर्भ दे रहा हूं:

@matkokvesic वास्तव में एक समाधान नहीं है, जो जीवन चक्र हुक के बाहर होने वाले परिवर्तन का कारण बनता है। कोणीय v4.1.3 का उपयोग करते समय प्रदान किया गया कोड उदाहरण त्रुटि का कारण नहीं बनता है

इसलिए मुझे लगता है कि एक सेटटाइमआउट () का उपयोग करने से जीवनचक्र हुक "स्किप" हो जाएगा या इसका मूल्यांकन नहीं किया जाएगा क्योंकि यह सामान्य रूप से होगा?

@ghetolay @fugwenna किस बारे में detach() की विधि ChangeDetectorRef ? कोई विचार? क्या यह पूरी तरह से परिवर्तन का पता लगाने में अक्षम नहीं होना चाहिए, इस प्रकार त्रुटि को भी खत्म करना चाहिए? मुझे समझ नहीं आता कि यह काम क्यों नहीं करता है? या उस त्रुटि को "स्वतंत्र" कहा जाता है? इसका मतलब है कि कोणीय वास्तव में इस तथ्य की परवाह नहीं करता है कि हमने परिवर्तन का पता लगाने में अक्षम कर दिया है, यह केवल परवाह करता है कि हमने एक संपत्ति को बदल दिया है जो इसे सेट किया गया है?
अगर लोग अभी भी "ExpressionChangedAfterItHasBeenChecked" बग के बारे में बहस करते हैं या नहीं, हो सकता है कि यह निश्चित रूप से एक बग है ... मेरी राय में, कोणीय को सेट होने के बाद गुणों को बदलने के बारे में हमें परवाह नहीं करनी चाहिए, अगर हम पूरी तरह से हैं। विकलांग परिवर्तन का पता लगाने। मूल रूप से मूल रूप से एक पूरे पेड़ पर, मूल घटक और अन्य सभी बाल घटकों के लिए, मैंने इसे किया था।

मैं यहां थोड़ा खो गया हूं, मेरी एक समस्या यह है कि मुझे यकीन नहीं है कि मैं देव मोड में अपवाद को ट्रिगर किए बिना कुछ बहुत सामान्य चीजें कैसे करूंगा।

उदाहरण के लिए, मैंने एक कंट्रोल वैल्यू एक्सेसर कंपोनेंट लिखा है जो डेटापिक को एनकैप्सुलेट करता है। मैं इस घटक को एक खाली मॉडल के साथ फ़ीड करता हूं जो आंतरिक रूप से डेटपिकर को पारित किया जाता है जो इसे इनिशियलाइज़ करता है और इसे पंजीकृत फ़ंक्शन के माध्यम से वापस भेजता है। बेशक बच्चे अपने इनिट के दौरान मॉडल को संशोधित करते हैं, लेकिन मैं यही चाहता हूं! मैं एक आरंभिक मॉडल वापस लेना चाहता हूं लेकिन अभिभावक में इनिशियलाइज़ेशन नहीं करते क्योंकि यह डेटपिकर है जो यह करता है कि उसे कैसे करना है।

मुद्दा यह है कि अब मैं यह कैसे करूंगा? कॉल सेटटाइमआउट और ट्रिगर परिवर्तन का फिर से पता लगाएं? ChangeDetectorRef का उपयोग करें? मुझे यह पसंद नहीं है क्योंकि यह वास्तव में कोड को पढ़ना मुश्किल बनाता है। एक अलग सेवा में प्रारंभिक चीज़? लेकिन यह सेवा बिना किसी व्यावसायिक मूल्य के केवल तकनीकी उद्देश्य से काम कर रही है और मुझे यकीन भी नहीं है कि इससे समस्या हल हो जाएगी।

@fugwenna मेरी मुख्य चिंता यह थी कि यह 4.1.3 में काम किया और अब टूट गया है। मैंने कोणीय टीम के झंकार पर किसी को भी नहीं देखा है, अगर हमें अपने इनिट फ़ंक्शंस में setTimeout का उपयोग करना चाहिए और ज़ोन को अपने हाथ में लेने देना चाहिए, लेकिन यह पहले से काम करने की तुलना में एक विरोधी पैटर्न की तरह लगता है।

@ kavi87 तो यह stackoverflow सवाल वास्तव में मुझे सुरुचिपूर्ण समाधान मैं जरूरत दे दी है। मेरे बच्चे घटक async में घटना emitter बनाने के लिए कौन सी थी:
new EventEmitter(true)

109 टिप्पणियों वाले एक प्रतिगमन के रूप में लेबल किए गए मुद्दे के लिए यह मुद्दा किसी भी आधिकारिक शब्द के साथ निराशाजनक रूप से शांत है।

जबकि यहां हर कोई स्वयं-सहायता तकनीकों के साथ एक अच्छा काम कर रहा है, मुझे यह जानना अच्छा लगेगा कि क्या यह वास्तव में बग है, या केवल 4.2.x में कुछ नया व्यवहार लागू किया गया है? यदि ऐसा है तो इसे ब्रेकिंग चेंज के रूप में सूचीबद्ध किया जाना चाहिए (और इस तरह यह एक मामूली रिलीज नहीं है?)

@MrCroft
मुझे यकीन नहीं है कि अपवाद का पता लगाने के लिए पूरी तरह से परिवर्तन का पता लगाना अक्षम है नीचे जाने के लिए एक अच्छा रास्ता है, हालांकि सिद्धांत रूप में, मैं देखता हूं कि यह कैसे करना चाहिए / समझ में आ सकता है।

मैं @Jikeike और @rosslavery से बहुत कम प्रतिक्रिया या स्पष्टीकरण के संबंध में सहमत हूं कि यह त्रुटि संदेश 4.2x के बारे में क्यों आया, जो परिवर्तनों को बिना किसी रोक-टोक के समाप्त कर दिया गया है ... हालाँकि इसका एक और गूढ़ टुकड़ा यह है कि यह कैसे स्पष्ट रूप से केवल देखा जाता है विकास मोड, जो लगभग परिवर्तन का पता लगाने की एक चेतावनी की तरह महसूस करता है (?)

Im मेरा AppComponent मैं एक div है।
उस div का एकमात्र उद्देश्य व्यस्त ओवरले दिखाना है।
व्यस्त स्थिति को http सेवा वर्ग के अंदर ट्रिगर किया गया है:

app.component.html

<!-- Busy Overlay -->
<div *ngIf="busy$ | async"
     class="overlay">
    <i class="loading">
        <i><sk-wave></sk-wave></i>
    </i>
</div>

app.component.ts:

  get busy$(): Observable<boolean> {
    return this.catolService.busy$;
  }

4.3.4 में अपग्रेड करने के बाद, मुझे हमेशा एक एक्सप्रेशनचेंज किया जाता है। ItHasBeenCheckedError जब सर्विस व्यस्त अवस्था को ट्रिगर करता है।

क्या इस सरल एसिंक्रोनस परिदृश्य के लिए कोई निर्धारण है?

@ emazv72 ... क्या यह स्टैकब्लिट्ज़ / प्लंकर डेमो आपके मामले के समान है? https://stackblitz.com/edit/angular-2p2h9s?file=app%2Fapp.component.ts या https://plnkr.co/edit/RPOxSVnXvM1TqKp.peSY?p=preview

@ mukunku धन्यवाद, मैं कोशिश करूँगा कि।

@ mlc-mlapis मैंने आपका प्लंकर थोड़ा बदल दिया मेरा कोड बिल्कुल https://plnkr.co/edit/uUT7tiM5BKPIy2upJPhb?p=preview है

लेकिन प्लंकर मुद्दे को नहीं दिखाता है। मैं यह देखने के लिए नवीनतम 4.x पर अपग्रेड करने का प्रयास करूंगा कि क्या यह ठीक किया गया है।

धन्यवाद

हाय सब - यहाँ देरी पर माफी।

तो - यह व्यवहार वास्तव में इरादा के अनुसार काम कर रहा है, जो मुझे एहसास है कि कुछ लोगों के लिए अप्रत्याशित हो सकता है, इसलिए मुझे मैकेनिक्स को समझाने की कोशिश करें।

@saveretts का प्लंकर इस पर चलने के लिए एक अच्छा प्रतिनिधि है (धन्यवाद!) - https://plnkr.co/edit/fr7rTNTCgEhHcbKnxAWN?p=preview

Tldr यह है कि कोणीय ने हमेशा इस तरह से काम किया है - परिवर्तन का पता चल रहा है, ऊपर से नीचे (या माता-पिता -> बच्चा), एकल पास में। इसलिए, यदि हमारे पास:

@Component({ 
  selector: 'app-root',
  template: `
    <!-- initially falsey -->
    <div *ngIf="sharedService.someValue">NgIf Block</div>
    <child-comp></child-comp>
  `
})
class AppRoot {
  constructor(public sharedService:SharedService){}
}

@Component({ 
  selector: 'child-component',
  template: `child comp`
})
class ChildComponent {
  constructor(public sharedService:SharedService){}
  ngOnInit(){
    this.sharedService.someValue = true;
  }
}

परिवर्तन जांच पहले ऐप-रूट के लिए चलेगी, इसके सभी बाइंडिंग की जांच करें, और फिर बच्चे के घटक का पता लगाने के लिए फिर से बदलाव करें - क्योंकि हम इसे एक पास में करते हैं (बजाय AngularJS- स्टाइल स्थिर रहने तक जांच करते हैं), माता-पिता बंधन (* एनजीआईएफ, इस मामले में) की फिर से जाँच नहीं की जाती है - इसलिए अब आपका आवेदन असंगत स्थिति में है (!)

विकास मोड में, हम वास्तव में उस परिवर्तन का पता लगाने को दो बार चलाते हैं - दूसरी बार यह सत्यापित करता है कि बाइंडिंग नहीं बदली गई है (जो असंगत स्थिति को इंगित करेगा), और यदि ऐसा कोई समस्या मिलती है, तो त्रुटि को फेंकता है। आप रिप्रेजेंट में enableProdMode() कॉल करके इस व्यवहार को सत्यापित कर सकते हैं: https://plnkr.co/edit/GGEzdxK1eHzHyGiAdp56?p=preview। ध्यान दें कि त्रुटि नहीं डाली गई है (क्योंकि हम सीडी एक्स 2 नहीं चला रहे हैं), लेकिन आवेदन एक असंगत स्थिति में समाप्त होता है (बच्चे को दिखाया गया है, लेकिन * एनजीआईएफ नहीं), जो एक बैड थिंग है।

यह हाल ही में सामने आया कारण यह है कि पहले, राउटर ने घटकों को सम्मिलित करते समय कई अतिरिक्त परिवर्तन का पता लगाया था - यह अक्षम था और एनिमेशन और रूटिंग के साथ समस्याओं का कारण था, खासकर जब राउटर-आउटलेट एनजीआईएफएस और ऐसी चीजों में नेस्टेड होते वह व्यवहार तय हो गया था, जो पहले से अब तक गलत कोड का कारण बना है * सही ढंग से एक त्रुटि है कि डेवलपर एक तरह से डेटा-प्रवाह का उल्लंघन कर रहा है।

मेरा तर्क है कि आम तौर पर, कोड जो इस एकतरफा प्रवाह का उल्लंघन करता है (जैसा कि ऊपर repro करता है) गलत है । हालांकि - ऐसे मामले हैं जहां आप इस व्यवहार को चाहते हो सकते हैं (वास्तव में, हमारे पास एंगुलर फॉर्म लाइब्रेरी में एक समान सेटअप है)। इसका मतलब यह है कि आपको एक और परिवर्तन का पता लगाने के लिए स्पष्ट रूप से ट्रिगर करना होगा (जो रूट घटक पर वापस जाएगा और टॉप-डाउन की जांच करेगा)। कॉलिंग setTimeout यह प्राप्त करता है, हालांकि आमतौर पर यह ट्रिगर करने के लिए एक वादा का उपयोग करना बेहतर होता है - https://plnkr.co/edit/IoKMxEOlY9lY9LcWwFKw?p=preview देखें

उम्मीद है की वो मदद करदे!

@robwormald यही त्रुटि अन्य परिदृश्यों के साथ भी हो रही थी। मुझे यकीन नहीं है कि यह ContentChildren के साथ समस्या को संबोधित करता है । कोई निर्देश त्रुटि के बिना AfterContentInit के दौरान बच्चों के मूल्यों को कैसे बदल सकता है लेकिन एक घटक में एक ही त्रुटि फेंकता है?

इसके अलावा, यह उम्मीद है कि अगर एक cdr.detectChanges() को एक init प्रक्रिया के दौरान कहा जाता है कि अन्य init फ़ंक्शन समाप्त हो रहे हैं? इस धागे में कुछ ऐसा मैंने एक अलग मुद्दा बनाया है ।

@robwormald

मेरा मानना ​​है कि @JSMike इस आकलन में सही है कि यह त्रुटि अभी भी परिदृश्यों के दौरान डाली गई है, जहां एक-तरफ़ा प्रवाह किसी पालक से आ रहा है-> ContentChild (ren) और ViewChild (ren) का उपयोग करते हुए बच्चा।

क्या यह विचार करने के लिए स्वीकार्य है कि मैंने पहले क्या कहा है , यह त्रुटि "चेतावनी" से अधिक है जो बताता है कि डेवलपर एकतरफा प्रवाह "सर्वोत्तम अभ्यास" के खिलाफ जा रहा है, लेकिन परिवर्तन का पता लगाने के बाद से किसी भी आवेदन को तोड़ने की त्रुटियों का कारण नहीं है। केवल उत्पादन मोड (वास्तविक दुनिया) के दौरान एक बार चलता है?

@fugwenna नहीं, यह वास्तव में एक त्रुटि है, क्योंकि यह अन्यथा असंगत स्थिति में दृश्य छोड़ देता है। रॉब के माध्यम से जो नमूना चल रहा है, वह सब बता रहा है।

इसके अलावा, डॉक्स से यह उद्धरण है

कोणीय के यूनिडायरेक्शनल डेटा फ्लो नियम को देखने के बाद अपडेट करने से मना किया जाता है। घटक के दृष्टिकोण की रचना के बाद ये दोनों हुक आग लगाते हैं।

यदि आपको वास्तव में वहां कुछ भी बदलने की आवश्यकता है, तो ऐसा करने के लिए एक एस्किंस विधियों का उपयोग करें। setTimeout यहां अनुकूल हो सकते हैं, लेकिन ध्यान रखें कि यह (इस लेखन के समय) 4ms देरी से आता है। दूसरा तरीका Promise.resolve().then(() => Assignment = here)

इससे भी बेहतर एक कदम वापस ले रहा है, और देखें कि आपको इस प्रक्रिया में देर से बदलाव करने की आवश्यकता क्यों है और देखें कि क्या समस्या को हल करने के लिए एक क्लीनर तरीका है। अगर मैं खुद को ऐसा करते हुए पाता हूं, तो मैं इसे कोड गंध मानता हूं।

विस्तृत विवरण @robwormald के लिए धन्यवाद। मैं अभी भी उलझन में हूँ कि एक बच्चा -> माता-पिता का डेटा प्रवाह तब भी काम करता है जब [hidden] *ngIf ( [hidden] बाइंडिंग का उपयोग करते हुए काम करता है। = पूर्वावलोकन)। किसी भी विचार क्यों यह अभी भी ExpressionChangedAfterItHasBeenCheckedError देने के बिना काम करता है?

कोणीय परिवर्तन का पता लगाने के लिए checkAndUpdateView फ़ंक्शन का उपयोग करता है।

इस फ़ंक्शन का संक्षिप्त प्रतिनिधित्व इस तरह दिख सकता है:

function checkAndUpdateView(view) {
    // update bound properties and run ngOnChanges/ngOnInit/ngDoCheck for child directives
    updateDirectives
    // check all embedded views that belong current view
    execEmbeddedViewsAction(view, ViewAction.CheckAndUpdate);
    // update DOM for the current view
    updateRenderer
    // perform checkAndUpdate for all child components
    execComponentViewsAction(view, ViewAction.CheckAndUpdate);
}

इसे execEmbeddedViewsAction और execComponentViewsAction विधियों के लिए पुन: धन्यवाद के रूप में निष्पादित किया जाता है। और यहां तक ​​कि मुख्य बिंदु यह है कि कोणीय चेक, निर्देशों की जाँच के बाद और DOM को अपडेट करने से पहले एम्बेडेड दृश्य हैं।

@Saverett उदाहरण को सरल बनाने के लिए मैं निम्नलिखित टेम्पलेट का उपयोग करूंगा

<div *ngIf="!sharedService.displayList">Some text</div>
<router-outlet></router-outlet>

https://plnkr.co/edit/OdkzHjEXbEd3efYAisFM?p=preview

हम पहले से ही जानते हैं कि *ngIf सिर्फ desugar है। इसलिए

<ng-template [ngIf]="sharedService.displayList">
  <div>Some text</div>
</ng-template>
<router-outlet></router-outlet>

हम निम्नलिखित संरचना की कल्पना कर सकते हैं:

  my-app
     |
   NgIf directive
       NgIf EmbeddedView
   RouterOutlet directive

RouterOutlet निर्देश क्या करता है?

यह ViewContainerRef में रूट किए गए घटक को इंजेक्ट करता है

activateWith(activatedRoute: ActivatedRoute, resolver: ComponentFactoryResolver|null) {
    ...
    this.activated = this.location.createComponent(factory, this.location.length, injector);

इसका अर्थ है कि router-outlet EmbeddedView router-outlet बनाता है EmbeddedView RouterOutlet निर्देश के बाद हम अपने AppComponent दृश्य में दो एम्बेडेड दृश्य रखते हैं।

  my-app
     |
   NgIf directive ([ngIf]="sharedService.displayList")
       NgIf EmbeddedView
   RouterOutlet directive 
      BComponent EmbeddedView

आइए इसे चित्र में चित्रित करते हैं

अब हम अपने मुख्य कार्य पर वापस आते हैं

function checkAndUpdateView(view) {
    // update bound properties and run ngOnChanges/ngOnInit/ngDoCheck for child directives
    updateDirectives
    // check all embedded views that belong current view
    execEmbeddedViewsAction(view, ViewAction.CheckAndUpdate);
    ...
    // update DOM for the current view
    updateRenderer
    ...
}

कोणीय निम्नलिखित क्रम में जाँच करेगा:

NgIf directive ([ngIf]="sharedService.displayList") updateDirectives(1)
      NgIf EmbeddedView   execEmbeddedViewsAction(2)
RouterOutlet directive 
      BComponent EmbeddedView  execEmbeddedViewsAction(3)

हमारे NgIf निर्देश को पहले चेक किया जाएगा (यहाँ sharedService.displayList=false को याद किया जाता है) और फिर NgOnInit अंदर BComponent (जहाँ हम sharedService.displayList बदल रहे हैं) true ) और जब कोणीय checkNoChanges प्रदर्शन करता है, तो यह Expression has changed after it was checked त्रुटि को बढ़ा देगा।

तो चलो *ngIf [hidden] साथ बदलें। अब हमारे पास RouterOutlet द्वारा सम्मिलित केवल एक एम्बेडेड दृश्य होगा और हमारे [hidden]="sharedService.displayList" updateRenderer भीतर की जाँच की जाएगी

  my-app
     |
   div{Some Text} just a node
   RouterOutlet directive 
      BComponent EmbeddedView

कोणीय इस तरह जाँच करेगा:

function checkAndUpdateView(view) {
    // check all embedded views that belong current view
    execEmbeddedViewsAction(view, ViewAction.CheckAndUpdate);   BComponent.ngOnInit (1)
    ...
    // update DOM for the current view
    updateRenderer   update hidden binding (2)
    ...
}

इस तरह डोम प्रॉपर्टी बाइंडिंग में त्रुटि नहीं होगी क्योंकि हमने ngOnInit मूल्य कॉल करने के बाद अपडेट किया है।

संरचनात्मक निर्देश *ngIf और डोम संपत्ति [hidden] बीच मुख्य अंतर है

विस्तृत अवलोकन @alexzuza के लिए धन्यवाद! यह बहुत मददगार था!

setTimeout () ने वास्तव में मेरे लिए काम किया :) धन्यवाद @jingglang :)
.subscribe (डेटा => setTimeout (() => this.requesting = data, 0))

@robwormald यहाँ सही है। मेरे पास एक ही मुद्दा था और यह पता लगाना अधिक कठिन था क्योंकि मैं एनजीआरएक्स और वेधशालाओं का उपयोग कर रहा था। मेरे पास समस्या यह थी कि मार्ग पदानुक्रम में विभिन्न स्तरों पर घटक कंटेनर थे जो स्टोर राज्य की सदस्यता ले रहे थे। जैसे ही मैंने अपने कंटेनर घटकों को अपने फीचर मॉड्यूल में समान स्तर पर स्थानांतरित किया, समस्या दूर हो गई। मुझे पता है कि यह एक जटिल उत्तर की तरह है, लेकिन अगर आप एनजीआरएक्स कंटेनर / घटक पैटर्न का उपयोग कर रहे हैं, तो उम्मीद है कि यह आपकी जांच को सही दिशा में इंगित करता है

SetTimeOut के साथ यह काम करता है, धन्यवाद @jingglang
ngAfterViewInit () {
this.innerHeight = (window.innerHeight);
setTimeout () (> = this.printPosition (), 0);
}

@alexzuza , यह सिर्फ ngIf के लिए नहीं हो रहा है, यह हो रहा है (कम से कम मेरे लिए) भी [ngClass] के साथ

@ निंजा-कोडिंग-गिट मैंने केवल विशिष्ट मामले का वर्णन किया है। मुझे पता है कि यह किसी भी कोड के साथ हो सकता है।

मेरे लिए, ChangeDetectorRef को कॉल करने के बाद तत्व को बदलने से समस्या हल हो गई:

import { Component, ChangeDetectorRef } from '@angular/core'

@Component({
  selector: 'my-app',
  template: `<div>I'm {{message}} </div>`,
})
export class App {
  message: string = 'loading :(';

  constructor(private _cdr: ChangeDetectorRef) {}

  ngAfterViewInit() {
    this.message = 'all done loading :)'
    this._cdr.detectChanges();
  }

}

समाधान यहाँ पाया

नमस्कार @thetylerb! क्या आप इस पर अधिक विस्तार कर सकते हैं। हम ngrx का उपयोग कर रहे हैं और मैं नहीं जानता कि इसके लिए क्षतिपूर्ति कैसे की जाए। मुझे लगता है कि वेधशालाओं के शीर्ष पर वादों का उपयोग करना बहुत अजीब है।

@ piq9117 आप भी इस टिप्पणी पर एक नज़र ले जा सकते हैं https://github.com/angular/angular/issues/18129#issuecomment -+३२,६८,०१,१९२ मैं परिवर्तन का पता लगाने और ngrx के बीच बातचीत पर किए गए, तो वहां स्थित मुझे लगता है हो सकता है

@victornoel धन्यवाद! यह बहुत हमारी स्थिति का वर्णन करता है। हमें नेस्टेबल डेटा स्ट्रक्चर्स (इम्यूटेबलज) नेस्टेड मिल गए हैं, और हम हर जगह एसिंक्स पाइप का उपयोग कर रहे हैं। मेरे शुरुआती विचार थे, स्टोर हाइड होने पर कंपोनेंट ट्री को बदल देगा, और कंपोनेंट ट्री इस बदलाव की भरपाई करेगा और दूसरा बदलाव करेगा।

हमें नेस्टेबल डेटा स्ट्रक्चर्स (इम्यूटेबलज) नेस्टेड मिल गए हैं, और हम हर जगह एसिंक्स पाइप का उपयोग कर रहे हैं। मेरे शुरुआती विचार थे, स्टोर हाइड होने पर कंपोनेंट ट्री को बदल देगा और कंपोनेंट ट्री इस बदलाव की भरपाई करेगा और दूसरा बदलाव करेगा।

मेरी परियोजना में हमारे पास कुछ प्रकार के सामान्यीकृत डेटास्ट्रक्चर (नेस्टेड डेटा संरचनाओं के बजाय) हैं, इसलिए यह इस तरह की समस्याओं को थोड़ा कम करता है, जब तक कि यह नहीं होता है! : हे

आप केवल आशा ही है:

• बदलते हुए आप डेटास्ट्रक्चर को स्टोर करते हैं ताकि एक हिस्से में बदलाव से दूसरे हिस्सों को कोई अपडेट न मिले
• सावधान घटकों के childs से घटनाओं को ट्रिगर करने के लिए नहीं किया जा रहा है जो async पाइप के माध्यम से स्टोर को सुनते हैं
• जब आप पूर्वोक्त घटनाओं को ट्रिगर करते हैं, तो मैन्युअल रूप से परिवर्तन का पता लगाना शुरू हो जाता है
• उन घटनाओं को किसी अन्य समय या किसी सेट टाइमआउट में ट्रिगर करें

मैं ngrx का उपयोग कर रहा हूं और इस तरह की स्थिति प्राप्त कर रहा हूं:

App.component.html में:
<div *ngIf='(appState | async).show'>test</div>
और app.component.ts में
this.appState= this.store.select("app");

बेशक इस स्थिति में मुझे त्रुटि मिलती है, लेकिन जब मैं इस तरह से घटक में बूलियन ध्वज जोड़ता हूं:
app.component.html -> <div *ngIf='show'>test</div>
app.component.ts ->
this.appState.subscribe((state: AppState) => { this.show= state.show; })

त्रुटि दूर हो गई है, निश्चित रूप से यह मेरे लिए समझ में आता है क्यों, लेकिन मैं आपकी राय जानना चाहता हूं, क्या यह एक अच्छा समाधान है? पेशेवरों और विपक्ष क्या हैं ??

Ngrx का उपयोग नहीं कर रहा है, लेकिन क्वेरी के साथ एक सरल जांच के साथ समस्या हो रही है let chips = [].map.call(document.querySelectorAll('li.chip'), this.chipVisible);

ChangeDetectorRef.detectChanges() साथ @bogdancar का समाधान त्रुटि को दबाता है, लेकिन जो भी पहले स्थान पर त्रुटि पैदा कर रहा है उसे ठीक करके ChangeDetectorRef को आयात नहीं करना अच्छा होगा।

मुझे वही मुद्दा मिला जब मैं कोणीय 4.4.4 में rxjs का उपयोग कर रहा था। मैं सिर्फ DI सेवा द्वारा प्रदान की गई एक अवलोकन योग्य वस्तु की सदस्यता लेता हूं। नीचे मेरा काम:

this.eventBroadcastService.getCustomEvent({type: 'loginOpen'}).subscribe(e => { setTimeout(() => { this.isBlur = true; }, 0); });

मैं चारों ओर काम करने के लिए एक setTimeout का उपयोग करता हूं। अब यह काम करता है, लेकिन यह मुश्किल है। मुझे अच्छा नहीं लग रहा है।

ngOnChanges (परिवर्तन: SimpleChanges | कोई भी) चाल करता है

इस मुद्दे को बस एनजीडॉचेक () पद्धति के अंदर गतिशील बदलते मापदंडों तर्क को स्थानांतरित करने के बाद तय किया गया था।
ngDoCheck(): void { this.checkValid = this.sourceArr.includes((this.chanedVal).toUpperCase()); }

@ asrinivas61 मुझे लगता है कि यह एक बहुत बुरा विचार है। ngDoCheck को कोणीय द्वारा बहुत कुछ कहा जा रहा है और यदि आपके sourceArr पास बहुत अधिक डेटा है, तो यह आपके जोखिम को प्रभावित कर सकता है।

Https://angular.io/guide/lifecycle-hooks#other -angular-lifecycle-hook देखें

मैं इसके बजाय ngAfterViewInit साथ setTimeout ngAfterViewInit का उपयोग करने की सलाह setTimeout :

setTimeout(_ => /* your code here */, 1000);

उदाहरण:

  public ngAfterViewInit(): void {
    // We use setTimeout to avoid the `ExpressionChangedAfterItHasBeenCheckedError`
    // See: https://github.com/angular/angular/issues/6005
    setTimeout(_ => this.isLoadingInProgress = false, 1000);
  }

@droroh आपको एक वास्तविक टाइमआउट जोड़ने की आवश्यकता नहीं है, आप बस चाहते हैं कि js आपके कोड को अगले async कार्य में निष्पादित करें जिसका अर्थ है एक और परिवर्तन का पता लगाना।

@victornoel मेरा मानना ​​है कि जब तक आप स्पष्ट रूप से detectChanges ChangeDetectorRef कॉल नहीं करेंगे तब तक वे पर्यवेक्षकों के साथ काम करेंगे। काश ये सब ज़रूरी नहीं होता।

@dgroh आपने मुझे गलत समझा होगा, मैं सिर्फ लिखने की वकालत कर रहा था:

public ngAfterViewInit(): void {
    // We use setTimeout to avoid the `ExpressionChangedAfterItHasBeenCheckedError`
    // See: https://github.com/angular/angular/issues/6005
    setTimeout(_ => this.isLoadingInProgress = false);
  }

क्या ngAfterViewInit जैसे setTimeout बाद एक कदम जोड़ना संभव नहीं है? (उदाहरण के लिए: ngAfterViewLoad )

@ aks4it , यह काम करने लगता है, लेकिन मुझे अधिक विवरण पसंद है कि यह कैसे होता है? क्या डायनेमिक कंपोनेंट जेनरेशन कोड सिंक्रोनस है?

कोणीय डॉक्स से आधिकारिक प्लंकर डेमो में एक ही त्रुटि है। क्या आप इसे वहां ठीक कर सकते हैं? :) धन्यवाद

@luckylooke

  ngAfterViewInit() {
    //this.loadComponent();
    this.getAds();
  }

यह काम?

मुझे आपकी आवश्यकता समझ में नहीं आती है लेकिन आप वास्तव में 3 सेकंड का अंतराल चाहते हैं? यदि यह काम करता है, और यदि आप सीधे कॉल लोड करना चाहते हैं

ngAfterViewInit() {
    setTimeout(()=>{this.loadComponent()},0)
  }

@istiti मैं ChangeDetectorRef वर्कअराउंड को ठीक करने में सक्षम था, डेटा ... डेटा के बाद detectChanges() डाल रहा था।

लेकिन चूंकि यह आधिकारिक डॉक्स से भरपूर है, इसलिए मैं समस्या के आधिकारिक समाधान के बारे में उत्सुक था। टाइमआउट या ChangeDetectorRef नहीं।

क्षमा करें, मैं पहली पोस्ट में भी संक्षिप्त था .. मैं समस्या की गंभीरता को इंगित करना चाहता था, क्योंकि कोणीय डॉक्स कोड में भी समान हैं।

सिर्फ FYI करें, मुझे यकीन नहीं है कि वास्तव में यहां क्या हो रहा है, लेकिन जब मैं main.ts में मोड को सक्षम करता हूं तो त्रुटियां हो जाती हैं
`EnableProdMode ()

// अगर (पर्यावरण.उत्पाद) {

// enableProdMode ();

//} `

"@ कोणीय / कोर": "^ 4.2.4"
"टाइपस्क्रिप्ट": "~ 2.3.3"

@bakthaa ... यह व्यवहार माना जाता है क्योंकि नियंत्रण जाँच (चाहे घटक @Inputs() मूल्य समान हों) जिसे प्रत्येक सीडी चक्र के बाद केवल विकास मोड में नहीं बुलाया जाता है और न ही कोणीय एप्लिकेशन के उत्पादन मोड में। तो समस्या उत्पादन मोड में छिपी हुई है, लेकिन यह अभी भी है ... और शायद उत्पादन मोड में विभिन्न अवांछित या गलत दुष्प्रभावों का स्रोत हो सकता है।

मैं Angular 5 का उपयोग कर रहा हूं, मैं घटक में ChangeDetectorRef को इंजेक्ट करके और परिवर्तनों का पता लगाने के लिए मजबूर करके इस समस्या को ठीक करने में सक्षम था।

    constructor(private changeDetector: ChangeDetectorRef) {}

    ngAfterViewChecked(){
      this.changeDetector.detectChanges();
    }

@ साबरी-बोचलेमा ... हां, यह एक तरीका है ... लेकिन फिर भी आपको एक बार फिर से सोचना चाहिए ... क्यों एक सीडी चक्र के दौरान एक घटक @Inputs बदल जाते हैं ... और तय करें कि क्या होगा ... तर्क सही है ... और यह सच है कि 95% मामलों से अतिरिक्त detectChanges() कॉल किए बिना समस्या से बचने के लिए कोड को बदलना संभव है।

कोणीय 5.1.2 का उपयोग करना। मुझे यह त्रुटि तब मिल रही है जब ngAfterViewChecked में एक सामग्री संवाद खोल रहा है। जैसा कि @ aks4it ने बताया, मुझे इसे काम करने के लिए कोड को एक

मैं संस्करण 4.01 के साथ एक ही मुद्दे का सामना कर रहा हूं
एनजी-संस्करण = "4.0.1

कोणीय 4.4.6 के साथ यहां भी

this.changeDetector.detectChanges(); का उपयोग करके ठीक करें

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

https://plnkr.co/edit/Mc0UkTR2loI7wgmLAWtX

मैंने changeDetector.detectChanges की कोशिश की है, लेकिन काम नहीं कर रहा है

@AlexCenteno ... क्योंकि मूल्यांकन तर्क ऊपर से नीचे तक है ... और value की संपत्ति comp1 सेट किया गया है @Input() public value:String=null; पहले और उसके बाद फिर से सेट के संदर्भ का उपयोग करते हुए comp2.value ... <div comp1 [value]="comp2.value"></div> जो इस बीच Hello अपने @Input() माध्यम से सेट है ... सभी एक सीडी चक्र के साथ ... इसलिए दोहराया जाँच यदि बाल घटकों पर इनपुट समान हैं, तो देव विधा में सीडी चक्र की शुरुआत value comp1 पर value संपत्ति में परिवर्तन का पता लगाती है।

hi @ mlc-mlapis आपके समय के लिए धन्यवाद। तो त्रुटि से बचने का कोई तरीका नहीं है? मुझे लगता है कि यह एक ऐसी चीज है जिसके बारे में मुझे चिंता नहीं करनी चाहिए, क्योंकि मैं enableProdMode कहता हूं?

@ अलेक्ससेंटेनो ... हाँ, सीडी मोड के बाद चेकिंग मोड में सीडी चक्र नहीं लगाया जाता ... लेकिन इसका मतलब यह नहीं है कि आपको इससे संतुष्ट होना चाहिए। आपको value क्रॉस चाइल्ड घटकों को पास करने का एक अलग तर्क लागू करना चाहिए। एक समस्या यह भी है कि <div> संपत्ति value । आप विशेषता घटक का उपयोग क्यों करते हैं? सिर्फ क्यों नहीं:

<comp1 [value]="comp2.value"></comp1>
<comp2 #comp2 value="Hello"></comp2>

क्योंकि तब @Output() <comp2> करना ठीक होगा और यह आपको [value] comp1 बिना किसी त्रुटि के अपडेट करने की अनुमति देगा।

[email protected] का उपयोग angular@5 store.select फेंक चेतावनी ExpressionChangedAfterItHasBeenCheckedError देव मोड में और गलत तरीके से ठेस मोड पर काम करने के लिए। डिस्पैचिंग और चयन विभिन्न स्तरों / कंटेनरों पर होता है।

@Component({
  ...
  template `
  ...
      <div [ngClass]="{
        'home__sidenav': true,
        'home__sidenav--active': (isActiveSidenavMenu$ | async)
      }">
  ...
  `
})
export class HomeContainer {
  isActiveSidenavMenu$ = this.store.select(fromHome.isActiveSidenavMenu);
  ...
}

यह दृष्टिकोण चेतावनी संदेश को हटा देता है, लेकिन यह अधिक जटिल लगता है:

@Component({
  ...
  template `
  ...
      <div [ngClass]="{
        'home__sidenav': true,
        'home__sidenav--active': isActiveSidenavMenu
      }">
  ...
  `
})
export class HomeContainer {
  isActiveSidenavMenu$ = this.store.select(fromHome.isActiveSidenavMenu);
  isActiveSidenavMenu;

  ngOnInit() {
    this.isActiveSidenavMenu$.subscribe(res => {
      this.isActiveSidenavMenu = res;
      this.cd.detectChanges();
    });
  }
}

क्या कोई विचार है कि इस समस्या को अधिक सही तरीके से कैसे हल किया जाए?

@rimlin क्या आपने सीधे स्टोर की सदस्यता लेने की कोशिश की है?

ngOnInit() {
  this.store.select(fromHome.isActiveSidenavMenu)
    .subsbrice(res => {
      this.isActiveSidenavMenu = res;
    });
}

मुझे लगता है कि मैं एक ऐसी ही समस्या थी। और टेम्पलेट में async बचने से समस्या हल हो गई।

सलाह के लिए @ piq9117 धन्यवाद, अपने समाधान की कोशिश की, ऐसा लगता है कि कम कोड के साथ अधिक स्पष्ट हैं, लेकिन यहां भी this.cd.detectChanges(); कॉल करने की आवश्यकता है, अन्यथा दृश्य अपडेट नहीं किया जाएगा।

ngOnInit() {
    this.store.select(fromHome.isActiveSidenavMenu).subscribe(res => {
      this.isActiveSidenavMenu = res;
      this.cd.detectChanges();
    });
}

मैं Angular 5.2 का उपयोग कर रहा हूं, मैंने कुछ ऐसा किया है। मेरे लिये कार्य करता है

constructor(private changeDetector: ChangeDetectorRef) {}

ngAfterViewInit(){
  this.changeDetector.detectChanges();
}

का उपयोग कर कोणीय 5.2, पता लगाने का उपयोग कर तय ()

हां, हमने डिटेक्टचेंज () मार्ग के साथ-साथ (कोणीय 5.1) का उपयोग करके इसे ठीक किया। मैं यहां कई अन्य लोगों के साथ हूं, हालांकि उन्हें लगता है कि यह अभी भी एक समाधान है और लंबे समय में जवाब के रूप में नहीं माना जाना चाहिए। उपयोग करने में सक्षम होने के लिए एक और जीवनचक्र हुक होना चाहिए।

इस तरह के बदलाव की अनुमति देने के लिए एक पूरी तरह से नए परिवर्तन का पता लगाने वाले चक्र को ट्रिगर करना उप-इष्टतम लगता है।

ऐसा लगता है कि सभी जवाब और सलाह पहले से ही ऊपर पोस्ट की गई हैं, भले ही यह जारी है।

1. इसे ठीक करने का सही तरीका यह है कि आप अपने घटकों और डेटा हैंडलिंग को फिर से आर्किटेक्ट / रिस्ट्रक्चर करें और ऊपर से नीचे की ओर एक सिंगल चेंज डिटेक्शन पास के साथ काम करें। इसका मतलब यह है कि कोई भी बच्चा घटक एक मूल्य को बदल नहीं सकता है जो कि मूल घटक के टेम्पलेट में उपयोग किया जाता है। आपने जो निर्माण किया है उसका पुनर्मूल्यांकन करें और सत्यापित करें कि डेटा केवल एक दिशा में, घटक वृक्ष के नीचे बहता है। यह कुछ मामलों में ngAfterViewInit और ngOnInit बाहर जाने के रूप में सरल हो सकता है।
2. this.changeDetectorRef.detectChanges(); 5% से कम मामलों में इसे संभालने के लिए आधिकारिक और मान्यता प्राप्त तरीका है जहां पहला कदम समस्याग्रस्त है।

अन्य नोट:

1. ngAfterViewInit में कुछ भी करते समय बहुत सावधान रहें क्योंकि DOM में उपयोग किए जाने वाले बदलते मान इस त्रुटि का कारण बन सकते हैं।
2. Check या Checked जीवनचक्र के किसी भी हुक का उपयोग करते समय बहुत सावधान रहें क्योंकि उन्हें हर परिवर्तन का पता लगाने वाले चक्र पर बुलाया जा सकता है।
3. setTimeout इसके आसपास काम कर सकते हैं, लेकिन ऊपर दिए गए दो समाधान पसंद किए जाते हैं।
4. इस त्रुटि को देव मोड में अनदेखा करना और इस बात से खुश होना कि उत्पादन मोड "सुधार" है, जैसा कि ऊपर बताया गया है, त्रुटि मान्य नहीं है। ये जाँच ठेस मोड में नहीं की जाती हैं, लेकिन आपका ठेस मोड कोड अभी भी अवांछित परिवर्तन छोड़ रहा है और दृश्य और डेटा को सिंक से बाहर कर सकता है। यह कुछ मामलों में हानिरहित हो सकता है, लेकिन डेटा की अनदेखी / भ्रष्टाचार और बदतर समस्याओं को नजरअंदाज कर सकता है।
5. एक तरह से डेटा प्रवाह वास्तव में एंगुलर में बहुत अधिक नहीं बदला है, इसलिए यह पोस्ट करना कि आपने इसे एंगुलर के एक्स संस्करण में मारा है, बहुत उपयोगी नहीं है।
6. अधिक जीवन चक्र हुक या राज्यों को जोड़ना इसका समाधान नहीं है। डेवलपर्स बस कोड जोड़ेंगे जो उन हुक में डेटा प्रवाह का उल्लंघन करता है और इसी त्रुटि को ट्रिगर करता है।

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

ऊपर दिए गए पोस्ट और कई ब्लॉग पोस्ट इस पर अधिक गहराई से जाते हैं और पढ़ने के लायक हैं क्योंकि आपको इस तरह से डेटा प्रवाह मॉडल को समझना चाहिए और कैसे घटकों का निर्माण करना चाहिए और इसके भीतर डेटा पास करना चाहिए।

@Splaktar उपरोक्त टिप्पणी को उत्कृष्ट बनाने के लिए इस मुद्दे को लॉक करना (और मुझे हटाना) बेहतर होगा? धागा पहले से ही बहुत लंबा हो गया है और उनमें से ज्यादातर सिर्फ दोहरा रहे थे। 😃

@Splaktar आप इस बिंदु को बनाते हैं "इसका मतलब है कि कोई भी बच्चा घटक एक मान को बदल नहीं सकता है जो कि मूल घटक के टेम्पलेट में उपयोग किया जाता है"।

मान लें कि आपके पास एक कंटेनर घटक है जिसमें नेविगेशन, पृष्ठ शीर्षक आदि शामिल हैं, और यह उप-घटकों के संग्रह को लोड करता है, जिनमें से प्रत्येक अपने स्वयं के उप-घटकों को लोड कर सकता है। कंटेनर में लोड किए गए घटक डेटा के आधार पर बदल जाएंगे, और उनके द्वारा लोड किए गए उप-घटक डेटा के आधार पर बदल जाएंगे। इन उप-घटकों में से प्रत्येक को माता-पिता कंटेनर की जानकारी के बारे में जानकारी देने में सक्षम होना चाहिए कि वे क्या हैं ताकि माता-पिता कंटेनर उपयोगकर्ता के लिए उपयुक्त शीर्ष स्तर नव को प्रदर्शित कर सकें (ब्रेडक्रम्ब ट्रेल शायद, या कुछ इसी तरह), साथ ही साथ जानकारी के रूप में जो कंटेनर स्तर पर पहचान करने के लिए शीर्षक में उपयोग किया जा सकता है जो देखने में भरी हुई है।

इसमें, जो मेरे अनुभव में एक अत्यंत सामान्य वास्तुकला है, मैं एक सामान्य राज्य सेवा का उपयोग करूंगा जो उप-घटक स्वयं के साथ पंजीकृत करेगा, और माता-पिता घटक इसकी सदस्यता लेते हैं ताकि बच्चे माता-पिता और माता-पिता को शिक्षित कर सकें उचित जानकारी प्रदर्शित कर सकते हैं।

यह नीचे के दृष्टिकोण का अनुसरण नहीं कर रहा है, क्योंकि माता-पिता को सेवा से सभी प्रासंगिक डेटा मिलेंगे, और बाल घटकों द्वारा आवश्यक किसी भी जानकारी को एक-तरफ़ा संचार के माध्यम से नीचे धकेल दिया जाएगा।

ऐसा लगता है कि आप जो सुझाव दे रहे हैं, उसे काउंटर पर चलाएं और मेरे लिए समस्या का स्रोत है। जब बच्चा घटक सेवा के साथ पंजीकृत होता है, तो मूल घटक त्रुटि फेंकता है।

क्या यह गलत है?

और कभी मत भूलो, कि एक अनुमोदित बग है:
https://github.com/angular/angular/issues/15634

@ मार्टिन-वेगनर कृपया https://github.com/angular/angular/pull/18352#issuecomment -354170352 देखें

@alignsoft ... क्या आपके पास अपने मामले और स्टैकब्लिट्ज़ के रूप में समस्या का एक सरल प्रजनन है? क्योंकि ऐसा लगता है कि आपके द्वारा वर्णित तर्क की तुलना में मामले को कुछ और प्रभावित करना चाहिए।

@Splaktar से समाधान यहाँ मेरी सरल समस्या से संबंधित नहीं हैं @trotyl https://github.com/angular/angular/issues/17572#issuecomment -+३१,१५,८९,२९० या?

@ मार्टिन-वेगनर ... आपके मामले में यह ngAfterViewInit से ngOnInit हुक बदलने के लिए पर्याप्त है।

@alignsoft , जैसा कि @ mlc-mlapis ने कहा कि एक Stackblitz उदाहरण इस मामले के लिए उचित वास्तुकला का प्रदर्शन करने में बहुत मददगार होगा। यह सेवाओं, वेधशालाओं, जीवन चक्र हुक आदि के सही सेट का उपयोग करके बहुत संभव है। यह विशिष्ट मामला स्टैकऑवरफ्लो के लिए भी एक अच्छा विषय होगा।

@Splaktar एक बार जब मुझे अपनी डेस्क से मेरी वर्तमान समय सीमा मिल जाती है तो मैं एक

@ mlc-mlapis वाह धन्यवाद, यह काम करता है :)

@alignsoft , आज मैं एक ऐसा ऐप बना रहा था जो आपके द्वारा बताए गए व्यवहार के समान है। @ mlc-mlapis, आप स्टैकब्लिट्ज़ पर छीन नीचे उदाहरण पा सकते हैं। यदि आप बाईं नाव पर "सीएमएस सिस्टम" पर क्लिक करते हैं, तो ExpressionChangedAfterItHasBeenCheckedError अपवाद फेंक दिया जाएगा।

उदाहरण में, admin.component 3 चीजों के प्रभारी मूल घटक के रूप में कार्य करता है:

• एक बाईं नौसेना प्रदर्शित करना
• एक शीर्ष टिकर जो उप घटकों का उपयोग कर अपने स्वयं के टिकर संदेश प्रदर्शित कर सकता है
• एक मुख्य सामग्री अनुभाग जो <router-outlet></router-outlet> माध्यम से उप घटक विशिष्ट डेटा प्रदर्शित करता है।

जनक घटक

<div class="ticker-container" *ngIf="tickedMessage !== ''">
  <h1>{{tickedMessage}}</h1>
  <button type="button" (click)="tickedMessage = ''">
    close
  </button>
</div>

<div class="side-nav">
  <h2>side nav</h2>
  <ul>
    <li><a routerLink="/">dashboard</a></li>
    <li><a routerLink="/apps/thirdpartycms">CMS System</a></li>
  </ul>
</div>
<div class="main-content-container">
  <router-outlet></router-outlet>
</div>

export class AdminComponent implements OnInit, OnDestroy {
  private _tickedMessageSubscription: Subscription;

  tickedMessage: string = '';

  constructor(
    private router: Router,
    private adminService: AdminService
  ) { }

  ngOnInit() {
    /* 
      On the side nav if you click on CMS System, this piece of code throws the exception: 
      "ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed 
       after it was checked. Previous value: 'false'. Current value: 'true'.""
    */
    this._tickedMessageSubscription = this.adminService.tickedMessageAnnounced$.subscribe((tickedMessage: string) => {
      this.tickedMessage = tickedMessage;
    });
  }

  ngOnDestroy() {
    this._tickedMessageSubscription.unsubscribe();
  }
}

<router-outlet></router-outlet> का उपयोग करते समय मूल घटक तक डेटा वापस संचार करने के तरीके पर शोध करने में, मैंने पढ़ा कि अगर मैं मूल घटक पर डेटा वापस भेजने के लिए @Output का उपयोग करता हूं, तो राउटर-आउटलेट निर्देश समाप्त हो जाएगा। घटना को संभालना। चूंकि यह एक कस्टम ईवेंट है, इसलिए राउटर-आउटलेट निर्देश को नहीं पता होगा कि इसे कैसे संभालना है। इसलिए मैंने इस विधि को छोड़ दिया। एक बार जब मैंने angular.io पर साझा सेवाओं के बारे में पढ़ा तो मैंने अपना लिखा:

साझा सेवा

import { Injectable } from '@angular/core';
import { Subject }    from 'rxjs/Subject';

@Injectable()
export class AdminService {

  private _tickedMessageAnnounced = new Subject<string>();

  tickedMessageAnnounced$ = this._tickedMessageAnnounced.asObservable();

  announceTickedMessage(tickedMessage: string) {
    this._tickedMessageAnnounced.next(tickedMessage);
  }
}

एक बार बाल घटकों में से एक को this.adminService.announceTickedMessage(this._tickedMessage); कहा जाता है:

बाल घटक

import { Observable } from 'rxjs/Observable';
import { Component, ViewChild, OnInit, Inject } from '@angular/core';
import { AdminService } from '../../../core/admin/admin.service';

@Component({
  selector: 'cms',
  templateUrl: './thirdparty-cms.component.html',
  styleUrls: ['./thirdparty-cms.component.scss'],
})
export class ThirdPartyCmsComponent implements OnInit {
  private _tickedMessage: string;
  constructor(private adminService: AdminService) { }

  ngOnInit(): void {
    this._tickedMessage = 'Please do not create an entry for a page URL that does not exist in the CMS system';

    this.adminService.announceTickedMessage(this._tickedMessage);
  }
}

मूल घटक ने ExpressionChangedAfterItHasBeenCheckedError अपवाद फेंक दिया क्योंकि इसने बच्चे के घटक द्वारा भेजे गए टिक संदेश मूल्य के साथ अपने सार्वजनिक गुणों में से एक को अपडेट करने की कोशिश की:

मूल घटक (थ्रो अपवाद)

export class AdminComponent implements OnInit, OnDestroy {
  private _tickedMessageSubscription: Subscription;

  tickedMessage: string = '';

  constructor(
    private router: Router,
    private adminService: AdminService
  ) { }

  ngOnInit() {
    /* 
      On the side nav if you click on CMS System, this piece of code throws the exception: 
      "ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed 
       after it was checked. Previous value: 'false'. Current value: 'true'.""
    */
    this._tickedMessageSubscription = this.adminService.tickedMessageAnnounced$.subscribe((tickedMessage: string) => {
      this.tickedMessage = tickedMessage;
    });
  }

  ngOnDestroy() {
    this._tickedMessageSubscription.unsubscribe();
  }
}

सब्सक्राइब कॉल को एसिंक्रोनस रूप से निष्पादित करके और टिक किए गए संदेश का इंतजार करने के लिए ExpressionChangedAfterItHasBeenCheckedError क्या तय किया गया था:

मूल घटक (async प्रतीक्षा के साथ)

export class AdminComponent implements OnInit, OnDestroy {
  private _tickedMessageSubscription: Subscription;

  tickedMessage: string = '';

  constructor(
    private router: Router,
    private adminService: AdminService
  ) { }

  ngOnInit() {
    /* 
      This clears the ExpressionChangedAfterItHasBeenCheckedError exception.
    */
    this._tickedMessageSubscription = this.adminService.tickedMessageAnnounced$.subscribe(async (tickedMessage: string) => {
      this.tickedMessage = await tickedMessage;
    });
  }

  ngOnDestroy() {
    this._tickedMessageSubscription.unsubscribe();
  }
}

WPF की दुनिया से आते हुए, ऐसा लगता है कि हमें UI थ्रेड को अवलोकनीय रूप से निष्पादित किए जाने के बाद से देखने योग्य सदस्यता कॉलबैक की प्रतीक्षा करने की आवश्यकता है?

मैं केवल कोणीय के साथ शुरू कर रहा हूं इसलिए कृपया मेरे कोणीय कौशल के प्रति कुछ दया करें: पी

@ktabarez धन्यवाद, इससे मुझे बहुत मदद मिली!

@ktabarez धन्यवाद! यह अच्छी तरह से काम करने लगता है! मैं समय-समय पर मूल घटक में सदस्यता लपेट रहा था, जो काम भी कर रहा था, लेकिन गंदा लग रहा था।

मैं देख रहा हूं कि जब redux राज्य को पूछताछ करने की गारंटी देता है, लेकिन स्टार्टअप पर ऐसा करता है, जब निर्माणकर्ताओं के विपरीत ngOnInit में डाल दिया जाता है।

@ktabarez बहुत बहुत धन्यवाद!

आपका async ... await in subscribe समाधान काम करता है।

@ktabarez आपका समाधान अनिवार्य रूप से एक सेटटाइमआउट ({}, 0) के रूप में कर रहा है, लेकिन यह अधिक सुरुचिपूर्ण लगता है। काफी पसंद है! यह भी मुझे एहसास हुआ कि कुछ भी इंतजार किया जा सकता है (बहुत # सी # की तरह इंतजार टास्क .romResult (tickedMessage)), तो उसके लिए चीयर्स!

तो, प्रश्न: हमें एक अवलोकन योग्य संपत्ति की गणना पर एक async / प्रतीक्षा क्यों करनी चाहिए जो पिछले छोर से डेटा प्राप्त कर रहा है जो अक्सर बदल रहा हो सकता है? क्या ngClass के बारे में यह आवश्यक बनाता है? मैं एक {अवलोकन योग्य का उपयोग करते समय यह प्राप्त करता हूं async} पाइप। इसलिए मेरे लिए एसिंक्स / वेट सबसे अच्छा मूल्यांकन नहीं है। (या async पाइप सबसे अच्छा तरीका नहीं है)

मेरे पास यह मुद्दा है जहां मेरे मूल घटक में कई बच्चे घटक हैं। चाइल्ड कंपोनेंट में से एक में एक इनपुट होता है, जहां उसे पैरेंट कंपोनेंट प्रॉपर्टी के डेटा की जरूरत होती है और प्रॉपर्टी को उसका डेटा ऑब्जर्वेबल / प्रॉमिस (दोनों की कोशिश की जाती है) से मिलता है।

parent.component.html

<mat-tab-group>
   <mat-tab>
      <app-child-1></app-child-1>
   </mat-tab>
   <mat-tab>
      <app-child-2></app-child-2>
   </mat-tab>
   <mat-tab>
      <app-child-3 [datasource]="data"></app-child-3>
   </mat-tab>
</mat-tab-group>

parent.component.ts

// ... omitted...
data: any;

ngOnInit() {
   this.service1.getMethod(some_id).then(data => this.data = data);
}

मुझे धागे में पाए जाने वाले हर समाधान के बारे में पता चला। लेकिन मेरे मामले में कुछ भी काम नहीं करता है। सौभाग्य से जैसा कि कुछ ने संकेत दिया है कि यह डोम से छेड़छाड़ करने के कारण एक मुद्दा है, उदाहरण के लिए _ (ngIf) _ को एक अभिव्यक्ति देना।

तो इससे बचने के लिए मैं ng-template , ng-container और ngTemplateOutlet के साथ प्रयोग करने की कोशिश करता हूँ।

<ng-container *ngTemplateOutlet="data ? content : loading"></ng-container>

<ng-template #content>
   <mat-tab-group>
      <mat-tab>
         <app-child-1></app-child-1>
      </mat-tab>
      <mat-tab>
         <app-child-2></app-child-2>
      </mat-tab>
      <mat-tab>
         <app-child-3 [datasource]="data"></app-child-3>
      </mat-tab>
   </mat-tab-group>
</ng-template>

<ng-template #loading>Loading your component. Please wait</ng-template>

मैं ChangeDetectorRef या setTimeout() का उपयोग किए बिना इसे हल करने में सक्षम था

मेरे लिए, यह त्रुटि तब हुई जब स्थिति के अनुसार फ़ील्ड को दिखाते / छिपाते हुए, मैं फ़ील्ड के मानों को लागू करने के बाद इसे हल करने में सक्षम था:

this.form.get ('field').updateValueAndValidity();

मैं मैट-डायल के साथ ऐसा करने की कोशिश कर रहा हूं, जो इनिट पर खुलता है, और मैंने सचमुच इस थ्रेड (मैंने टाइमआउट, वादा हल, ऑब्जर्वेबल पाइप, व्यू इनिट के बाद, कंटेंट इनिट के बाद) के हर समाधान की कोशिश की है और उसमें संयोजन। फिर भी काम नहीं करता है। तब मैंने @Splaktar पोस्ट के बारे में देखा कि कैसे यह एक तरह से डेटा प्रवाह का उल्लंघन करता है, इसलिए मैंने डायलॉग को खोलने के लिए सचमुच ngrx में एक ध्वज बनाया और उसे सब्सक्राइब किया, जो शुरू में गलत है और मुझे अभी भी यह त्रुटि मिल रही है। मैं पृथ्वी पर क्या करूँ? क्या वास्तव में कुछ पूरी तरह से अलग घटना में संलग्न किए बिना एक मॉडल संवाद को खोलने का कोई तरीका नहीं है?

Init पर:
this.store.pipe( select(getShouldLogin), ).subscribe((shouldLogin: boolean) => { if (shouldLogin) { this.openLoginDialog(); } }); this.checkUserId();

सहायक कार्य:
checkUserId() { const id = this.cookies.getUserId(); if (!id || id === 'undefined') { this.connApi.setShouldLogin(true); } }
openLoginDialog() { const dialogRef = this.dialog.open(LoginDialogComponent, { width: '400px', height: '300px', }); dialogRef.afterClosed().subscribe(result => this.handleLogin(result)); }

कोणीय 6.0.0-rc.1 का उपयोग करना

मैं ngrx के साथ कोणीय का उपयोग कर रहा हूं और फॉर्म जमा करने के बाद यह त्रुटि आई है।
निर्धारित करके
ChangeDetectionStrategy.OnPush
फार्म घटक पर

अभी भी समस्या है। सभी प्रकार के वर्कअराउंड की कोशिश की। setTimeout पहली बार काम करता है, लेकिन बाद में उसी त्रुटि में dialog.open ट्रिगर हो जाता है। इस पर कोई स्टेटस?

मैं उसी मुद्दे का सामना कर रहा हूं। सब कुछ करने की कोशिश की, लेकिन ऐसा लगता है कि यह मुद्दा एक तरह से डेटा प्रवाह पर उठता है।
यहां मैं चयनित चयनित लोगों को अपडेट करने का प्रयास कर रहा हूं। जहां समस्या हल होती है लेकिन वही त्रुटि उत्पन्न होती है।

        <p-row> <p-column class="text-left" footer="{{selectedWoids.length}} {{getWoidString(selectedWoids.length)}} selected out of {{getTotalCounts()}} {{getWoidString(getTotalCounts())}}" colspan="11"></p-column> </p-row>

निजी सेट
अगर (यह।
this.selectedWoids = this.allWoids;
}
}

क्योंकि आप कोणीय के रेंडरिंग पाइपलाइन को तोड़ते हैं ...

मैं 4.1.2 से 4.2.3 पर स्विच करने के बाद "ExpressionChanged ..." समान त्रुटियों को देख रहा हूं।

मेरे मामले में, मेरे पास दो घटक हैं जो एक सेवा के माध्यम से बातचीत करते हैं। सेवा मेरे मुख्य मॉड्यूल के माध्यम से प्रदान की जाती है, और ComponentA ComponentB से पहले बनाई जाती है।

4.1.2 , निम्नलिखित सिंटैक्स ने त्रुटियों के बिना ठीक काम किया:

_ComponentA टेम्पलेट: _

<ul *ngIf="myService.showList">
...

_ComponentB वर्ग: _

ngOnInit() {
  this.myService.showList = false; //starts as true in the service
  ...
}

4.2.3 , मुझे "ExpressionChanged ..." त्रुटि से बचने के लिए ComponentA टेम्पलेट को संशोधित करना होगा:

_ComponentA टेम्पलेट: _

<ul [hidden]="!myService.showList">
...

मैं अभी भी यह पता लगाने की कोशिश कर रहा हूं कि यह केवल एक मुद्दा क्यों बन गया है, और *ngIf से [hidden] काम करने के लिए स्विच क्यों।

क्या आपने पाया कि यह कैसे काम करता है जब एनजीआईएफ से [छुपा]

क्या एंगुलर 6 में अभी तक इस मुद्दे का कोई समाधान है ??

@alokkarma ... बहुत पुराना ... आपको इसे कम से कम 6 या 5 कोणीय में स्थानांतरित करना चाहिए। लेकिन आपका उदाहरण कोड स्पष्ट दिखता है ... आप चाइल्ड कंपोनेंट B में सर्विस प्रॉपर्टी बदल रहे हैं, और यह चाइल्ड कंपोनेंट A में कुछ व्यवहार को प्रभावित करता है। दोनों बच्चों के कंपोनेंट्स को एक ही पैरेंट में रखा जाता है, इसलिए तीनों को एक साथ प्रोसेस किया जाता है। एक सीडी चक्र में संबंध। आप क्या उम्मीद करते हैं?

तथ्य यह है कि एक ही मामला 4.1.2 संस्करण में काम कर रहा था, कुछ बग से संबंधित है जिसे बाद के संस्करणों में समाप्त कर दिया गया था, जिसमें 4.2.3 भी शामिल था।

मैं Angular 6. का उपयोग कर रहा हूं। मैं अपने प्रमाणीकरण घटक और मेरे ऐप घटक के बीच संवाद करने के लिए एक संदेश सेवा का उपयोग कर रहा हूं, यदि उपयोगकर्ता लॉग इन (या नहीं) है तो अलग-अलग नौसेना बार सामग्री दिखाने के लिए।

यह इस त्रुटि के अलावा ठीक काम करता है!
मैं इस तरह के EventEmitter के रूप में अन्य समाधान की कोशिश की है, लेकिन यह काम नहीं करता है! या मुझे वही त्रुटि मिलती है।

@dotNetAthlete ...

@ बत माता-पिता कंटेनर के लिए निरीक्षण और प्रदर्शन करने के लिए।

हमेशा एक 'एक्सप्रेशन चेंज' त्रुटि तब होती है जब कंटेनर ने मूल्य को इनिशियलाइज़ किया और फिर चाइल्ड कंपोनेंट ने तुरंत इसे अपडेट कर दिया, इसलिए मैं अब इसे माता-पिता / कंटेनर में करता हूं:

    this.stateSvc.currentPageTitle$
      .subscribe(
        (async (pageTitle) => {
          this.pageTitle = await pageTitle;
        }))

राज्य सेवा में यह कहाँ है:

  // Store
  private currentPageTitleStore = new BehaviorSubject<string>("");

  // Getter (as Observable)
  public currentPageTitle$ = this.currentPageTitleStore.asObservable();

  // Setter
  public setCurrentPageTitle(pageTitle: string) {
    this.currentPageTitleStore.next(pageTitle);
  }

यह समस्या को समाप्त करता है। यह समाधान इस थ्रेड में दूसरों से कुछ उपयोगी प्रतिक्रिया पर आधारित है।

@alignsoft - सुंदर समाधान - मुद्दा कोणीय 6 ऐप में तय किया गया।

मैं इसे पृष्ठ 7 पर अब पुनः लोड कर रहा हूँ।
मैं माता-पिता ngAfterViewInit पर एक बाल घटक मूल्य निर्धारित कर रहा हूं
बाल घटक पर यह करना था

  public activate() {
    setTimeout(() => this.active = true);
  }

मुझे इस समस्या के समाधान में मिला https://github.com/angular/angular/issues/10762
मैंने AfterContentInit जीवन चक्र हुक का उपयोग करने के बाद, त्रुटि दूर हो जाती है।

@alignsoft , बस आपके बदलाव में, क्योंकि हम एक Subject के बजाय एक BehavioralSubject का उपयोग कर रहे हैं,

मैंने इसे निम्नानुसार परिष्कृत किया:

\\ Component
export class AppComponent implements OnInit {
  isLoading: Boolean;

  constructor(private loaderService: LoaderService) { }

  ngOnInit(){
    this.loaderService.isLoading.subscribe(async data => {
      this.isLoading = await data;
    });
  }
}

\\ Service
@Injectable({
  providedIn: 'root'
})
export class LoaderService {
  // A BehaviorSubject is an Observable with a default value
  public isLoading: BehaviorSubject<Boolean> = new BehaviorSubject(false);
  constructor() {}
}

\\ Any other component or in my case, an interceptor that has the LoaderService injected
this.loaderService.isLoading.next(true);

लेकिन मैं @dadyschmack से सहमत cdr.detectionChanges() या async await या aftercontentchecked ), क्यों [hidden] विशेषता काम करती है और *ngIf

@acidghost उस लिंक के लिए धन्यवाद, इसने मेरी समस्या हल कर दी। मैं वास्तव में अपने आवेदन के एक क्षेत्र में इसे ठीक करने की कोशिश कर रहा था, लेकिन जब यह एक नए क्षेत्र में फिर से होने लगा ...

निष्क्रियता के कारण यह मुद्दा स्वतः बंद हो गया है।
यदि आप एक समान या संबंधित समस्या का सामना कर रहे हैं, तो एक नया मुद्दा दर्ज करें।

हमारी स्वचालित वार्तालाप लॉकिंग नीति के बारे में और पढ़ें।

_{_ यह क्रिया स्वचालित रूप से बॉट द्वारा की जाती है ।_}