Où initialiser les variables dans un composant Angular 4 - ExpressionChangedAfterItHasBeenCheckedError

Question

J'ai un composant Angular 4 avec une variable booléenne. La valeur initiale dépend d'un flux d'entrée.

TypeScript me demande de déclarer la variable comme dans l'exemple ci-dessous. Sans cela, this.isLoading déclenchera une erreur. À ce stade, je ne sais pas encore sa valeur, donc je le déclare sans affecter de variable.

export class SomeComponent implements OnInit { 
    @Input() someStream$; 
    isLoading: boolean; 

    ngOnInit() { 
    someStream.subscribe((someData) => { 
     // Code to determine the value for isLoading 
     this.isLoading = true; 
    }); 
    } 
} 

Plus tard, lorsque je connaîtrai la valeur, je la définirai sur true ou false. Mais alors 'ExpressionChangedAfterItHasBeenCheckedError' entre en jeu.

Quelle est la «bonne façon» de définir ces types de valeurs 'par défaut'.

Answer 1

Je suppose que isLoading est votre drapeau pour savoir si la requête est terminée. Ce que je l'ai fait dans ce scénario était d'initialiser le chargement comme faux:

export class SomeComponent implements OnInit { 
    @Input() someStream$; 
    // Initialized as false. 
    isLoading: boolean = false; 

    ... 
} 

Si le drapeau isLoading a plus de logique, je changerais la façon dont vous interagissez avec le composant et changer le @input() pour someData directement, et gérer la logique async dans son parent.

Espérons que ça aide.