* ngIf firebaseとの同期問題

Question

これは基本的な質問で、基本的な回答であれば謝ります。私は特にAngular2の新機能や一般的な開発ではかなり新しく、止まっています。

私はFirebaseからリストを引っ張っているサービスがあります。

listItems: FirebaseListObservable<any[]>; 
constructor(public af: AngularFire) { 
    this.listItems = af.database.list('items'); 
} 
getFood() { 
    return this.listItems; 
} 

マイコンポーネント：

list: Observable<any[]>; 
delBtnActive: boolean = false; 
constructor(private dataService: DataSService) { 
    this.list = dataService.getFood(); 
} 

ngOnInit(): void { 
    this.lookForDel(); 
} 

lookForDel() { 
    var found = false; 
    this.list.forEach(items => { 
     items.forEach(item => { 
      if (item.del) {found = true}; 
     }) 
    }); 
    this.delBtnActive = found; 
} 

そして最後に私のテンプレート、delBtnActiveブールの利用可能：

<button *ngIf="delBtnActive">Confirm Delete</button> 

を

すべてがここで動作しますが、このルートが最初に初期化されたときにはボタンは表示されませんそれがそこにあるはずです。このルートから別のルートに切り替えてから戻ると、ボタンが正しく表示されます。 Firebaseのデータを更新すると、ボタンが正しく表示されます。

EDIT：コンソールのログに基づいて、lookForDel（）メソッドはOnInitを呼び出すことに注意してください。 I と信じているのは、ルートが最初に初期化されたときにデータがロードされる前にngIfが発生していることです。

これに関する具体的な助言や一般的なヒントについては、非常に高く評価されます。あなたのボタンがアクティブであるかどうかを示す - - 代わりに、あなたはブール値を発すること、観察を構成することができforEachを使用して放射された値のリスニングの

Answer 1

リストが観測あなたFirebaseから放出されるたびに：で

delBtnActive: Observable<boolean>; 

lookForDel() { 
    this.delBtnActive = this.listItems.map((items) => Boolean(items.find(item => item.del)); 
} 

あなたの現在の実装は時々働く理由として

<button *ngIf="delBtnActive | async">Confirm Delete</button> 

と、時々、私が見ることができる唯一の説明は時々目ということではありません：あなたのテンプレートは、あなたがしてasyncパイプを使用しますe forEachが同期的に発生し、時には同期しません。 （RxJSでは、実際にそのようなことが起こる可能性があります。）