ExpressionChangedAfterItHasBeenCheckedError Explained


308

Per favore spiegami perché continuo a ricevere questo errore: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.

Ovviamente, lo ottengo solo in modalità dev, non accade sulla mia build di produzione, ma è molto fastidioso e semplicemente non capisco i vantaggi di avere un errore nel mio ambiente di sviluppo che non verrà visualizzato su prod - -probabilmente a causa della mia mancanza di comprensione.

Di solito, la correzione è abbastanza semplice, ho appena avvolto l'errore che causa il codice in un setTimeout in questo modo:

setTimeout(()=> {
    this.isLoading = true;
}, 0);

O forzare il rilevamento delle modifiche con un costruttore come questo constructor(private cd: ChangeDetectorRef) {}:

this.isLoading = true;
this.cd.detectChanges();

Ma perché mi imbatto costantemente in questo errore? Voglio capirlo in modo da poter evitare queste correzioni disordinate in futuro.


Risposte:


121

Ho avuto un problema simile. Guardando la documentazione di ganci del ciclo di vita , ho cambiato ngAfterViewInita ngAfterContentInited ha funzionato.


@PhilipEnc il mio problema era legato a una modifica innescata dalla modifica del DOM. Quando il DOM cambiava, l'oggetto QueryList (proveniente da una proprietà @ContentChildren) veniva aggiornato e all'interno del metodo che l'aggiornamento lo chiamava cambiava la proprietà associata a due vie. Questo ha creato il problema che stavo avendo. Avvolgere quel cambiamento nella proprietà a due con setTimeoutcome hai mostrato sopra ha fatto il trucco. Grazie!
kbpontius,

1
Nel mio caso avevo inserito del codice che modificava il valore dell'array grid primeng in ngAfterContentInit, ho inserito il codice in ngOnInit e ha funzionato.
Vibhu,

ngAfterContentCheckedfunziona qui mentre ngAfterContentInitgenera ancora errore.
Ashubuntu,

ngAfterContentUso verificato ma il progetto è stato caricato molto lentamente
Ghotekar Rahul,

101

Questo errore indica un problema reale nella tua applicazione, quindi ha senso generare un'eccezione.

Nel devModerilevamento delle modifiche viene aggiunto un turno aggiuntivo dopo ogni normale esecuzione del rilevamento delle modifiche per verificare se il modello è stato modificato.

Se il modello è cambiato tra il turno di rilevamento cambio normale e quello aggiuntivo, ciò indica che

  • il rilevamento del cambiamento stesso ha causato un cambiamento
  • un metodo o getter restituisce un valore diverso ogni volta che viene chiamato

che sono entrambi cattivi, perché non è chiaro come procedere perché il modello potrebbe non stabilizzarsi mai.

Se le corse angolari cambiano il rilevamento fino a quando il modello non si stabilizza, potrebbe funzionare per sempre. Se Angular non esegue il rilevamento delle modifiche, la vista potrebbe non riflettere lo stato corrente del modello.

Vedi anche Qual è la differenza tra modalità di produzione e sviluppo in Angular2?


4
Come posso evitare di vedere questo errore in futuro? C'è un modo diverso in cui devo pensare al mio codice per assicurarmi di non commettere gli stessi errori?
Kevin LeStarge,

25
Di solito questo è causato da alcuni callback del ciclo di vita come ngOnInito ngOnChangesper modificare il modello (alcuni callback del ciclo di vita consentono di modificare il modello che altri non fanno, non mi ricordo esattamente quale faccia o no). Non associare a metodi o funzioni nella vista, bensì associare a campi e aggiornare i campi nei gestori di eventi. Se è necessario eseguire il binding ai metodi, assicurarsi che restituiscano sempre la stessa istanza di valore, purché non sia stata apportata alcuna modifica. Il rilevamento delle modifiche chiamerà questi metodi molto.
Günter Zöchbauer,

Per tutti coloro che arrivano qui che ottengono questo errore utilizzando la libreria ngx-toaster, ecco la segnalazione di bug: github.com/scttcper/ngx-toastr/issues/160
rmcsharry

2
Non è necessariamente un problema con l'app. Il fatto che chiamare changeRef.detectChanges()sia una soluzione / elimina l'errore, ne è la prova. È come modificare lo stato all'interno $scope.$watch()di Angular 1.
Kevin Beal,

1
Non conosco troppo bene Angular 1 ma il rilevamento delle modifiche in Angular 2 funziona in modo abbastanza diverso. cdRef.detectChanges()Hai ragione sul fatto che non è necessariamente un problema, ma di solito è necessario solo in alcuni strani casi limite e dovresti guardare attentamente quando ne hai bisogno per capire correttamente il perché.
Günter Zöchbauer,

83

Un sacco di comprensione è arrivata una volta che ho capito i ganci del ciclo di vita angolare e la loro relazione con il rilevamento del cambiamento.

Stavo cercando di far sì che Angular aggiornasse una bandiera globale associata a *ngIfun elemento e stavo cercando di cambiare quella bandiera all'interno del ngOnInit()gancio del ciclo di vita di un altro componente.

Secondo la documentazione, questo metodo viene chiamato dopo che Angular ha già rilevato modifiche:

Chiamato una volta, dopo il primo ngOnChanges ().

Quindi l'aggiornamento del flag all'interno di ngOnChanges()non avvia il rilevamento delle modifiche. Quindi, una volta che il rilevamento delle modifiche si è innescato naturalmente, il valore della bandiera è cambiato e viene generato l'errore.

Nel mio caso, ho cambiato questo:

constructor(private globalEventsService: GlobalEventsService) {

}

ngOnInit() {
    this.globalEventsService.showCheckoutHeader = true;
}

A questa:

constructor(private globalEventsService: GlobalEventsService) {
    this.globalEventsService.showCheckoutHeader = true;
}

ngOnInit() {

}

e risolto il problema :)


3
Il mio problema era simile. Che ho fatto un errore dopo lunghe ore e ho definito una variabile al di fuori della funzione e del costruttore ngOnInit. Questo riceve le modifiche dei dati da un osservabile, che viene inserito nella funzione di inizializzazione. Ho fatto la stessa cosa per correggere l'errore.
ravo10,

1
Molto simile tutt'intorno, ma stavo cercando di scorrere ( router.navigate) al caricamento su un frammento se presente nell'URL. Questo codice è stato inizialmente inserito nel AfterViewInitpunto in cui stavo ricevendo l'errore, quindi mi sono spostato come dici tu al costruttore ma non rispettava il frammento. Passando a ngOnInitrisolto :) grazie!
Joel Balmer,

Che cosa succede se il mio html è associato a un tempo di restituzione migliore come "HH: MM" tramite get ClockValue () {return DateTime.TimeAMPM (nuova data ())} alla fine scatta quando cambiano i minuti mentre il rilevamento è in esecuzione, come posso Aggiustalo?
Meryan,

Anch'io. Ho anche scoperto che il wrapping in setInterval()funziona anche se deve essere attivato dopo un altro codice evento a vita.
Rick Strahl,

39

Aggiornare

Consiglio vivamente di iniziare prima con l'auto-risposta del PO : pensa correttamente a cosa si può fare in constructorvs cosa si dovrebbe fare ngOnChanges().

Originale

Questa è più una nota a margine che una risposta, ma potrebbe aiutare qualcuno. Mi sono imbattuto in questo problema quando ho cercato di far dipendere la presenza di un pulsante dallo stato del modulo:

<button *ngIf="form.pristine">Yo</button>

Per quanto ne so, questa sintassi porta all'aggiunta e alla rimozione del pulsante dal DOM in base alla condizione. Che a sua volta porta al ExpressionChangedAfterItHasBeenCheckedError.

La correzione nel mio caso (anche se non pretendo di cogliere tutte le implicazioni della differenza), era display: noneinvece usare :

<button [style.display]="form.pristine ? 'inline' : 'none'">Yo</button>

6
La mia comprensione della differenza tra ngIf e lo stile è che ngIf non include l'HTML nella pagina fino a quando la condizione non è vera, riducendo così il "peso della pagina" un po 'mentre la tecnica dello stile fa sì che l'HTML sia sempre nella pagina e viene semplicemente nascosto o mostrato in base al valore di form.pristine.
user3785010,

4
Si potrebbe anche usare al [hidden]posto della parte molto dettagliata [style.display]. :)
Philipp Meissner,

2
Perchè no. Anche se, come menzionato da @Simon_Weaver in un altro commento in questa pagina, [hidden] non avrà sempre lo stesso comportamento didisplay: none
Arnaud P

1
Stavo mostrando due diversi pulsanti (logout / login) con * ngIf in ciascun pulsante e questo stava causando il problema.
Vai al

il costruttore era il posto giusto per me, lanciando uno snack bar materiale
austin il

31

Ci sono state risposte interessanti, ma non mi è sembrato di trovarne una adatta alle mie esigenze, la più vicina è quella di @ chittrang-mishra, che si riferisce solo a una funzione specifica e non a diverse opzioni come nella mia app.

Non volevo utilizzare [hidden]per trarre vantaggio dal fatto di *ngIfnon essere nemmeno parte del DOM, quindi ho trovato la seguente soluzione che potrebbe non essere la migliore per tutti poiché sopprime l'errore invece di correggerlo, ma nel mio caso in cui conosco il il risultato finale è corretto, sembra ok per la mia app.

Quello che ho fatto è stato implementare AfterViewChecked, aggiungere constructor(private changeDetector : ChangeDetectorRef ) {}e quindi

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

Spero che questo aiuti gli altri come molti altri mi hanno aiutato.


3
questo non innescherà un loop di rilevamento di cambiamenti infiniti? Voglio dire, stai rilevando le modifiche dopo aver controllato.
Manuel Azar,

@ManuelAzar Apparentemente no. Questa è l'unica soluzione che ha funzionato per me. Ultimamente un po 'di silenzio nella mia console. Ero così stanco di tutti questi irrilevanti "errori" di rilevamento delle modifiche.
Jeremy Thille,

31

Le corse angolari cambiano il rilevamento e quando trova che alcuni valori che sono stati passati al componente figlio sono stati modificati, Angular genera l'errore:

ExpressionChangedAfterItHasBeenCheckedError clicca per di più

Per correggere ciò possiamo usare il AfterContentCheckedgancio del ciclo di vita e

import { ChangeDetectorRef, AfterContentChecked} from '@angular/core';

  constructor(
  private cdref: ChangeDetectorRef) { }

  ngAfterContentChecked() {

    this.cdref.detectChanges();

  }

Anche se questo potrebbe risolvere il problema, non è molto espansivo e eccessivo il CD?
Nicky,

Penso che questa sia l'unica risposta che risolve questo errore causato dal passaggio di valori a un bambino. Grazie!
java-addict301,

@Nicky Sì. Ogni volta che tocchi lo schermo, ovunque, viene chiamato ngAfterContentChecked ()
Mert Mertce,

25

Nel mio caso, ho riscontrato questo problema nel mio file delle specifiche, durante l'esecuzione dei test.

Ho dovuto cambiare ngIf in [hidden]

<app-loading *ngIf="isLoading"></app-loading>

per

<app-loading [hidden]="!isLoading"></app-loading>


2
La differenza qui è che *ngIfcambia il DOM, aggiungendo e rimuovendo l'elemento dalla pagina, mentre [hidden]cambia la visibilità dell'elemento senza rimuoverlo dal DOM.
Grungondola,

5
Ma questo non ha davvero risolto il vero problema ...?
ravo10,

23

Segui i passaggi seguenti:

1. Usa 'ChangeDetectorRef' importandolo da @ angular / core come segue:

import{ ChangeDetectorRef } from '@angular/core';

2. Implementalo nel costruttore () come segue:

constructor(   private cdRef : ChangeDetectorRef  ) {}

3. Aggiungi il seguente metodo alla tua funzione che stai chiamando su un evento come il clic del pulsante. Quindi sembra così:

functionName() {   
    yourCode;  
    //add this line to get rid of the error  
    this.cdRef.detectChanges();     
}

23

Stavo usando ng2-carouselamos (Angular 8 e Bootstrap 4)

Di seguito risolto il mio problema:

Cosa ho fatto:

1. implement AfterViewChecked,  
2. add constructor(private changeDetector : ChangeDetectorRef ) {} and then 
3. ngAfterViewChecked(){ this.changeDetector.detectChanges(); }

Ha aiutato. Sorprendente!!
Pathik Vejani,

Mi hai salvato la giornata ... Grazie!
omostan

19

Stavo affrontando lo stesso problema in quanto il valore stava cambiando in uno degli array nel mio componente. Ma invece di rilevare le modifiche sulla modifica del valore, ho modificato la strategia di rilevamento delle modifiche dei componenti in onPush(che rileverà le modifiche sulla modifica dell'oggetto e non sulla modifica del valore).

import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';

@Component({
    changeDetection: ChangeDetectionStrategy.OnPush
    selector: -
    ......
})

Questo sembra funzionare per aggiungere / rimuovere i controlli in modo dinamico ... ci sono degli svantaggi?
Ricardo Saracino,

Funziona come un incantesimo nella situazione che ho a portata di mano, grazie! Un componente è stato associato a un oggetto "globale" che è stato modificato altrove e ha causato l'errore. Questo componente aveva già un gestore aggiornamenti per quando l'oggetto associato è stato aggiornato, questo gestore eventi ora chiama changeDetectorRef.detectChanges () in combinazione con ChangeDetectionStrategy.OnPush funziona come desiderato senza l'errore.
Bernoulli IT

@RicardoSaracino hai riscontrato degli svantaggi? Mi chiedevo la stessa cosa. So come funziona il rilevamento delle modifiche OnPush, ma mi chiedo se c'è un gotcha che forse mi manca. Non voglio tornare indietro.
mtpultz,

@RicardoSaracino, Sì, ha alcuni svantaggi, puoi fare riferimento a questo link dettagliato blog.angular-university.io/onpush-change-detection-how-it-works
Dheeraj

@BernoulliIT Grazie, sono felice che abbia funzionato per te.
Dheeraj,

17

Facendo riferimento all'articolo https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4

Pertanto, i meccanismi alla base del rilevamento delle modifiche funzionano effettivamente in modo che sia il rilevamento delle modifiche sia i digest di verifica vengano eseguiti in modo sincrono. Ciò significa che se aggiorniamo le proprietà in modo asincrono i valori non verranno aggiornati quando il ciclo di verifica è in esecuzione e non avremo ExpressionChanged...errori. Il motivo per cui si ottiene questo errore è, durante il processo di verifica, Angular vede valori diversi da quelli registrati durante la fase di rilevamento delle modifiche. Quindi per evitarlo ....

1) Utilizzare changeDetectorRef

2) usa setTimeOut. Ciò eseguirà il codice in un'altra macchina virtuale come macro-attività. Angular non vedrà queste modifiche durante il processo di verifica e non si otterrà quell'errore.

 setTimeout(() => {
        this.isLoading = true;
    });

3) Se vuoi davvero eseguire il tuo codice sulla stessa VM, usa come

Promise.resolve(null).then(() => this.isLoading = true);

Questo creerà un micro-task. La coda delle micro-attività viene elaborata al termine dell'esecuzione dell'attuale codice sincrono, quindi l'aggiornamento della proprietà avverrà dopo il passaggio di verifica.


Puoi usare l'opzione # 3 con un'espressione di stile? Ho un'espressione di stile per l'altezza che dovrebbe essere valutata per ultima, perché si basa sul contenuto iniettato.
N-ate

1
Mi dispiace, ho appena visto il tuo commento, sì, non vedo alcun motivo per cui no. Quindi dovrebbe funzionare anche con i cambiamenti di stile.
ATHER,

4

@HostBinding può essere una fonte confusa di questo errore.

Ad esempio, supponiamo che tu abbia il seguente binding host in un componente

// image-carousel.component.ts
@HostBinding('style.background') 
style_groupBG: string;

Per semplicità, supponiamo che questa proprietà sia aggiornata tramite la seguente proprietà di input:

@Input('carouselConfig')
public set carouselConfig(carouselConfig: string) 
{
    this.style_groupBG = carouselConfig.bgColor;   
}

Nel componente genitore lo stai programmando ngAfterViewInit

@ViewChild(ImageCarousel) carousel: ImageCarousel;

ngAfterViewInit()
{
    this.carousel.carouselConfig = { bgColor: 'red' };
}

Ecco cosa succede:

  • Il componente principale è stato creato
  • Il componente ImageCarousel viene creato e assegnato a carousel(tramite ViewChild)
  • Non possiamo accedere carouselfino a ngAfterViewInit()(sarà nullo)
  • Assegniamo la configurazione, che imposta style_groupBG = 'red'
  • Questo a sua volta imposta background: redsul componente host ImageCarousel
  • Questo componente è "di proprietà" del componente principale, quindi quando verifica la presenza di modifiche trova una modifica carousel.style.backgrounde non è abbastanza intelligente da sapere che questo non è un problema, quindi genera l'eccezione.

Una soluzione è quella di introdurre un altro wrapper div insider ImageCarousel e impostare il colore di sfondo su quello, ma poi non si ottengono alcuni dei vantaggi dell'utilizzo HostBinding(come consentire al genitore di controllare i limiti completi dell'oggetto).

La soluzione migliore, nel componente padre è aggiungere detectChanges () dopo aver impostato la configurazione.

ngAfterViewInit()
{
    this.carousel.carouselConfig = { ... };
    this.cdr.detectChanges();
}

Questo può sembrare abbastanza ovvio come questo, e molto simile ad altre risposte, ma c'è una sottile differenza.

Considera il caso in cui non lo aggiungi @HostBindingpiù tardi durante lo sviluppo. Improvvisamente si ottiene questo errore e non sembra avere alcun senso.


2

Ecco i miei pensieri su ciò che sta accadendo. Non ho letto la documentazione, ma sono sicuro che questo fa parte del motivo per cui viene mostrato l'errore.

*ngIf="isProcessing()" 

Quando si utilizza * ngIf, cambia fisicamente il DOM aggiungendo o rimuovendo l'elemento ogni volta che cambia la condizione. Quindi, se la condizione cambia prima di essere renderizzata alla vista (che è altamente possibile nel mondo di Angular), viene generato l'errore. Vedi la spiegazione qui tra modalità di sviluppo e produzione.

[hidden]="isProcessing()"

Quando lo si utilizza [hidden]non cambia fisicamenteDOM ma semplicemente si nasconde il elementdalla vista, molto probabilmente usando CSSnella parte posteriore. L'elemento è ancora presente nel DOM ma non visibile a seconda del valore della condizione. Ecco perché l'errore non si verificherà durante l'utilizzo [hidden].


Se isProcessing()sta facendo la cosa ame, è necessario utilizzare !isProcessing()per[hidden]
Matthieu Charbonnier

hiddennon "usa CSS sul retro", è una normale proprietà HTML. developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/…
Lazar Ljubenović

1

Per il mio problema, stavo leggendo github - "ExpressionChangedAfterItHasBeenCheckedError durante la modifica di un valore 'non modello' del componente in afterViewInit" e ho deciso di aggiungere ngModel

<input type="hidden" ngModel #clientName />

Risolto il mio problema, spero che aiuti qualcuno.


1
Dove su quel sito dice di aggiungere ngModel. E potresti per favore spiegare perché questo dovrebbe essere utile?
Peter Wippermann,

Quando stavo rintracciando questo problema, mi ha portato a indagare sul collegamento. Dopo aver letto l'articolo ho aggiunto l'attributo e risolto il mio problema. È utile se qualcuno incontra lo stesso problema.
Demodave,

1

Suggerimenti per il debug

Questo errore può essere abbastanza confuso ed è facile fare un'ipotesi sbagliata esattamente quando si sta verificando. Trovo utile aggiungere molte dichiarazioni di debug come questa in tutti i componenti interessati nei punti appropriati. Questo aiuta a capire il flusso.

Nel genitore inserisci istruzioni come questa (la stringa esatta 'EXPRESSIONCHANGED' è importante), ma a parte questo, questi sono solo esempi:

    console.log('EXPRESSIONCHANGED - HomePageComponent: constructor');
    console.log('EXPRESSIONCHANGED - HomePageComponent: setting config', newConfig);
    console.log('EXPRESSIONCHANGED - HomePageComponent: setting config ok');
    console.log('EXPRESSIONCHANGED - HomePageComponent: running detectchanges');

Nei callback figlio / servizi / timer:

    console.log('EXPRESSIONCHANGED - ChildComponent: setting config');
    console.log('EXPRESSIONCHANGED - ChildComponent: setting config ok');

Se esegui detectChangesmanualmente aggiungi anche la registrazione per quello:

    console.log('EXPRESSIONCHANGED - ChildComponent: running detectchanges');
    this.cdr.detectChanges();

Quindi nel debugger di Chrome basta filtrare per "EXPRESSIONCHANGES". Questo ti mostrerà esattamente il flusso e l'ordine di tutto ciò che viene impostato, e anche esattamente in quale punto angolare genera l'errore.

inserisci qui la descrizione dell'immagine

Puoi anche fare clic sui collegamenti grigi per inserire i punti di interruzione.

Un'altra cosa da tenere d'occhio se hai proprietà con nomi simili in tutta l'applicazione (come style.background) assicurati di eseguire il debug di quello che pensi - impostandolo su un valore di colore oscuro.


1

Nel mio caso, avevo una proprietà asincrona LoadingServicecon un oggetto comportamentaleisLoading

L'uso del modello [nascosto] funziona, ma * ngIf ha esito negativo

    <h1 [hidden]="!(loaderService.isLoading | async)">
        THIS WORKS FINE
        (Loading Data)
    </h1>

    <h1 *ngIf="!(loaderService.isLoading | async)">
        THIS THROWS ERROR
        (Loading Data)
    </h1>

1

Una soluzione che ha funzionato per me usando rxjs

import { startWith, tap, delay } from 'rxjs/operators';

// Data field used to populate on the html
dataSource: any;

....

ngAfterViewInit() {
  this.yourAsyncData.
      .pipe(
          startWith(null),
          delay(0),
          tap((res) => this.dataSource = res)
      ).subscribe();
}

qual era il codice problematico? qual è la soluzione qui?
MK

Salve @mkb, il problema si verificava ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.quando si attivano le variazioni di valore quando cambia il DOM
Sandeep K Nair,

Ciao, intendo cosa hai fatto qui per superare il problema. Non hai mai usato rxjs prima o aggiunto delay () o aggiunto startWith ()? Uso già rxjs con vari metodi rxjs ma continuo a ricevere l'errore, spero di risolvere il mistero :(
mkb

L'aggiunta delayfa scomparire l'errore. Funziona in modo simile a setTimeout.
Lazar Ljubenović,

1

Ho avuto questo tipo di errore in Ionic3 (che utilizza Angular 4 come parte del suo stack tecnologico).

Per me lo stava facendo:

<ion-icon [name]="getFavIconName()"></ion-icon>

Quindi stavo cercando di cambiare in modo condizionale il tipo di icona di ioni da a pina a remove-circle, per una modalità su cui operava uno schermo.

Immagino che dovrò aggiungere un *ngIfinvece.


1

Il mio problema era evidente quando l'ho aggiunto, *ngIfma non era questa la causa. L'errore è stato causato modificando il modello nei {{}}tag e successivamente cercando di visualizzare il modello modificato nell'istruzione *ngIf. Ecco un esempio:

<div>{{changeMyModelValue()}}</div> <!--don't do this!  or you could get error: ExpressionChangedAfterItHasBeenCheckedError-->
....
<div *ngIf="true">{{myModel.value}}</div>

Per risolvere il problema, ho cambiato il modo in cui ho chiamato changeMyModelValue()in un posto che aveva più senso.

Nella mia situazione, volevo essere changeMyModelValue()chiamato ogni volta che un componente figlio cambiava i dati. Ciò ha richiesto la creazione e l'emissione di un evento nel componente figlio in modo che il genitore potesse gestirlo (chiamando changeMyModelValue(). Vedere https://angular.io/guide/component-interaction#parent-listens-for-child-event


0

Spero che questo aiuti qualcuno che viene qui: facciamo chiamate di servizio nel ngOnInitmodo seguente e utilizziamo una variabiledisplayMain per controllare il montaggio degli elementi sul DOM.

component.ts

  displayMain: boolean;
  ngOnInit() {
    this.displayMain = false;
    // Service Calls go here
    // Service Call 1
    // Service Call 2
    // ...
    this.displayMain = true;
  }

e component.html

<div *ngIf="displayMain"> <!-- This is the Root Element -->
 <!-- All the HTML Goes here -->
</div>

0

Ho ricevuto questo errore perché stavo usando una variabile in component.html che non è stata dichiarata in component.ts. Una volta rimossa la parte in HTML, questo errore era scomparso.


0

Ho ricevuto questo errore perché stavo inviando azioni redux in modale e il modale non era aperto in quel momento. Stavo spedendo azioni nel momento in cui il componente modale riceveva input. Quindi ho messo setTimeout lì per assicurarmi che il modale fosse aperto e quindi le azioni fossero indirizzate.


0

A chiunque abbia difficoltà con questo. Ecco un modo per eseguire correttamente il debug di questo errore: https://blog.angular-university.io/angular-debugging/

Nel mio caso, in effetti mi sono sbarazzato di questo errore usando questo hack [nascosto] invece di * ngIf ...

Ma il link che ho fornito mi ha permesso di trovare THE GUILTY * ngIf :)

Godere.


L'uso al hiddenposto di ngIfnon è un hack, né affronta affatto il nocciolo del problema. Stai solo mascherando il problema.
Lazar Ljubenović,

-2

La soluzione ... servizi e rxjs ... gli emettitori di eventi e l'associazione di proprietà usano entrambi rxjs..sei meglio implementare te stesso, più controllo, più facile da eseguire il debug. Ricorda che gli emettitori di eventi utilizzano rxjs. Semplicemente, crea un servizio e all'interno di un osservabile, fai in modo che ciascun componente si abboni all'osservatore e passi nuovo valore o valore di consumo secondo necessità


1
Non solo questo non risponde alla domanda, è anche un consiglio terribile. Ragazzi, per favore non reimplementate voi stessi rxjs solo perché ottenete gli errori CD di Angular. :)
Lazar Ljubenović,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.