動的データをAngularのコンポーネントに渡す方法はありますか？

Question

動的なデータを子コンポーネントに渡そうとしています。しかし、私は常に、子コンポーネントでは定義されていないデータを取得します。以下は私がやっていることです。

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 
} 

予想通り、それは非同期呼び出しを待ちませんので私を返す。どのように動的データをコンポーネントに渡すのですか？

Answer 1

問題は、observableからのサブスクライブが終了する前にUIスレッドが子コンポーネントをレンダリングすることです。

あなたはこのようにそれを実行する必要があります。

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

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

、あなたが最初の値をテストする必要がHTMLに。

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

少し説明、.markForCheck()は、サブスクライブ後に結果が更新されますし、NG-コンテナを含め、その値を更新するには、この「値」を使用しているすべてのコンポーネントを、お知らせいたします。コンテナによって子コンポーネントがレンダリングされるようになりました。子コンポーネントがそのライフサイクルを経るときに結果がnullでないことが保証されます。あなたはあなたのサービスがdataが正常ので、これは動作します取得することが確実な場合

Answer 2

ライフサイクルフックメソッドOnChanges試してみることもできます。あなたのケースでは

、あなたがそうのようなあなたの子コンポーネントに追加する必要があります：

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

PSはまた、私はちょうどあなたのChildComponent.tsで間違った構文を気づいた、それはthisが欠落しています。

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

Answer 3

：あなたの親コンポーネントのHTMLで

は引用符を追加：あなたの子コンポーネントで

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

を、変更をチェックしますこれは:)

01を助ける

ngOnChanges(changes: SimpleChanges) { 
    for (let propName in changes) { 
     // when your @Input value is changed 
     if(propName === "dataNeeded"){ 
      console.log(dataNeeded); 
     } 
    } 
} 

希望：あなたのInputのOnChを使用して

Answer 4

なぜ非同期パイプでObservableを使用しないのですか。 コンソールログに値を設定するには、セッターを使用します。 非同期パイプは、サブスクライブ解除にも注意します。

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

HTMLで

<app-childComponent [dataNeeded]="results | async"></app-childComponent> 

そして、あなたの子コンポーネントで

@Input('dataNeeded') 
set dataNeeded(val: any[]) { 
    console.log(val); 
}