ngIfはテンプレートを更新しません

Question

私は次のコンポーネントをAngular2に持っています。配列を入力として受け取り、配列の各エントリに対して、各エントリの緯度と経度を取得するサービスを呼び出します。 （約束を返す）サービス

export class MyComponent implements OnInit { 

    @Input() players: Player[] = []; 
    locations: LatAndLon[] = []; 
    isBusy: boolean = true; 


    constructor(
     private myService: MyService, 
    ) {} 

    ngOnInit(): void { 
     for (let player of this.players) { 
      this.myService.getLatAndLon(player.address).then(latAndLon => { 
       this.locations.push(latAndLon); 
       this.finishLoading(); 
      }); 
     } 

    } 

    finishLoading(): void { 
     this.isBusy = this.players.length != this.locations.length; 
    } 
    ... 
} 

ので、ngOnInit方法で、私は私のサービスからのすべてのデータを取得しよう。テンプレートに表示したいのですが、すべてのサービスコールを「解決」するまで待たなければなりません。

このため、すべてのデータが利用可能かどうかをチェックする変数isBusyを作成しました。私はisBusyをサービスに呼び出すたびに更新しようとします（もしそうなら、私に知らせてください）。

<div *ngIf="!isBusy"> 
.... 

しかしが、何も示されていない、私は場所の配列の値を印刷する場合、私は、すべてが右であることを何らかの手がかりを見ることができるという事実にもかかわらず：

はその後、私は次のテンプレートを持っていますか？

Answer 1

あなたが観察できるストリームにあなたの入力配列を変換する場合、それは容易になることがあります。

ngOnInit() { 
    let source = Observable.from(this.players) 
    .concatMap(x => Observable.fromPromise(this.myService.getLatAndLon(x))); 

    let subscription = source.subscribe(
    x => this.locations.push(x), 
    error => console.log('Error ', error), 
    () => this.isBusy = false 
); 
} 

注：あなたが入力配列の順序を保持するためにあなたの場所の配列が必要な場合はconcatMapを使用してください。これが必要ない場合はflatMapを使用できます。ここで

は観測と約束を橋渡しについてのドキュメントです：

https://github.com/Reactive-Extensions/RxJS/blob/master/doc/gettingstarted/promises.md

私はこのことができます願っています。