Estou tentando passar dados que são dinâmicos para um componente filho. Mas sempre recebo os dados como indefinidos no componente filho. Abaixo está o que estou fazendo.
ParentComponent.ts
results: any[];
ngOnInit() {
this.http.get('url').subscribe(data => this.results = data);
}
ParentComponent.html
<app-childComponent [dataNeeded]=results></app-childComponent>
ChildComponent.ts
@Input('dataNeeded') dataNeeded: any[];
ngOnInit() {
console.log(dataNeeded); //Always undefiend
}
Então, como esperado, ele não espera pela chamada assíncrona e me retorna indefinido. Como faço para passar os dados dinâmicos para o componente?
O problema é que o thread de interface do usuário renderizará o componente filho antes que a assinatura do observável termine.
você precisa fazer assim:
import { ChangeDetectorRef } from '@angular/core';
constructor(private ref: ChangeDetectorRef) {}
ngOnInit() {
this.http.get('url').subscribe(data => {
this.results = data;
this.ref.markForCheck();
});
}
e no HTML você deve testar o valor primeiro.
<ng-container *ngIf="results != null">
<app-childComponent [dataNeeded]=results></app-childComponent>
</ng-container>
Uma pequena descrição, o .markForCheck()irá atualizar o resultado após a assinatura e irá informar todos os componentes que estão usando este "valor" para atualizar seu valor, incluindo o ng-container. O contêiner permitiria renderizar o componente filho agora, o que garantirá que os resultados não sejam nulos quando o filho estiver passando por seu ciclo de vida.
Este artigo é coletado da Internet.
Se houver alguma infração, entre em [email protected] Delete.
deixe-me dizer algumas palavras