typescript - Finnes det noen måte jeg kan sende dynamiske data til en komponent i Angular?

Jeg prøver å sende data som er dynamiske til en barnekomponent. Men jeg får alltid dataene som undefined i barnekomponenten. Nedenfor er hva jeg gjør.

ForeldreKomponent.ts

results: any[];
ngOnInit() {
this.http.get('url').subscribe(data => this.results = data);
}

ParentComponent.html

<app-childComponent [dataNeeded]=results></app-childComponent>

BarnKomponent.ts

@Input('dataNeeded') dataNeeded: any[];
ngOnInit() {
 console.log(dataNeeded); //Always undefiend
}

Så som forventet, venter det ikke på det asynkrone kallet og returnerer meg undefined. Hvordan kan jeg sende de dynamiske dataene til komponenten?

Svar #1

Du kan prøve OnChanges livssyklus-hook-metoden.

I ditt tilfelle må du legge det til i barnekomponenten din slik:

ngOnChanges(changes) {
  if (changes['dataNeeded'] && this.dataNeeded) {
    console.log(this.dataNeeded);
  }
}

PS Jeg la også merke til den feilaktige syntaksen i din ChildComponent.ts, det mangler this:

ngOnInit() {
 console.log(this.dataNeeded);
}

Svar #2

Problemet er at UI-tråden vil gjengi barnekomponenten før påmeldingen fra det observerbare er ferdig.

du må gjøre det slik:

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

constructor(private ref: ChangeDetectorRef) {}
ngOnInit() {
   this.http.get('url').subscribe(data => { 
     this.results = data;
     this.ref.markForCheck();
   });
}

og i HTML må du først teste verdien.

<ng-container *ngIf="results != null">
    <app-childComponent [dataNeeded]=results></app-childComponent>
</ng-container>

En liten beskrivelse, .markForCheck() vil oppdatere resultatet etter subscribe og vil informere alle komponentene som bruker denne "verdien" om å oppdatere verdien sin, inkludert ng-container. Containeren vil nå tillate rendering av barnekomponenten, noe som vil garantere at resultatene ikke er null når barnet går gjennom sin livssyklus.

Relaterte artikler