Angular2非同期データの問題

Question

私は、非同期にフェッチされたオブジェクトに依存するコンポーネントを持っています。この同じオブジェクトからのデータに依存する子コンポーネントもテンプレートにあります。

私が抱えている問題は古典的な競合状態だと思われますが、解決策を理解するには角度2で十分に精通していません。

は、例えばこれを持っ：

export class SampleComponent { 
    constructor(service: SomeService) { 
     this.service = service; 
     this._loadData(); 
    } 

    private _loadData() { 
     this.service.getData().subscribe(data => this.data = data); 
    } 
} 

しかし、テンプレート内に、私はthis.dataの特定の部分を表示するには、子コンポーネントがあります。

<taglist tags="data?.tags"></taglist> 

を今すぐtaglistのコンポーネントは、次のようになります。

@Component({ 
    selector: 'taglist', 
    directives: [NgFor], 
    inputs: ['tags'], 
    template: `<span *ngFor="#tag of tags">{{ tag }}</span>` 
}) 

export class TagList { 
    public tags: Array<string> = []; 

    constructor() { 
     // 
    } 
} 

タグ入力を受信したため非同期ロードされたデータセットから、タグコンポーネントが初期化されたときには存在しません。 this.dataロードが終了すると、それを使用するサブコンポーネントは自動的にロードされた新しくデータにアクセスするように何を行うことができますか？

私に提供していただきありがとうございます。

Answer 1

また、それ以外の場合は、角が処理しない割り当てを属性にする単純な文字列だ

<taglist [tags]="data?.tags"></taglist> or <taglist tags="{{data?.tags}}"></taglist> 

を使用するバインディングを処理するために、角度のためにngOnChanges()（https://angular.io/docs/ts/latest/api/core/OnChanges-interface.html）

@Component({ 
    selector: 'taglist', 
    inputs: ['tags'], 
    template: `<span *ngFor="let tag of tags">{{ tag }}</span>` 
}) 

export class TagList { 
    public tags: Array<string> = []; 

    constructor() { 
     // 
    } 

    ngOnChanges(changes: {[propName: string]: SimpleChange}) { 
     console.log('ngOnChanges - tags = ' + changes['tags'].currentValue); 
    } 
} 

を実装します。

Answer 2

これは、組み込みのasyncパイプの通常の使用例です。これは、観測値を簡単に消費するために使用されます。

最初に観察直接サービス層をリターンよりもゲッターを作成し、以下のことを試してみてください。

get data(): Observable { 
    return this.service.getData(); 
} 

次にあなたがasyncパイプを使用してテンプレートに直接に観察を消費することができます

<span *ngFor="let tag of data | async">{{ tag }}</span>