コンテンツは私がクリックしたときにのみ表示されます

Question

私はAngbase 2アプリケーションでFirebase 3に接続しましたが、何も驚くべきことはありません。私は私のbug.component.tsにこのサービスを注入し、指定された特定の関数を呼び出し

getAddedBugs(): Observable<any> { 
    return Observable.create(obs => { 
     this.bugsDbRef.on('child_added', bug => { 
      const newBug = bug.val() as Bug;            
      obs.next(newBug); 
     }, 
     err => { 
      obs.throw(err) 
     }); 
    }); 
} 

：私はここに示したように、私はリスナーイベントを作成しているサービス内のサービスを作成している私の角度2アプリケーション内

上：

getAddedBugs() { 
    this.bugService.getAddedBugs().subscribe(bug => { 
     this.bugs.push(bug); 
    }, 
     err => { 
      console.error("unable to get added bug - ", err); 
     }); 
} 

これは私がその後、HTML内のループを超えることができるよ配列を、移入し、ここに示すように、テーブルの内容を構築：

<tbody> 
    <tr *ngFor="let bug of bugs"> 
     <td>{{ bug.title }}</td> 
     <td>{{ bug.status }}</td> 
     <td>{{ bug.severity }}</td> 
     <td>{{ bug.description }}</td> 
     <td>{{ bug.createdBy }}</td> 
     <td>{{ bug.createdDate }}</td> 
    </tr> 
</tbody> 

問題は、ページに何も表示されないページを読み込むときですが、ページをクリックすると、たとえばテーブルヘッダーが表示され、次に*ngForのテーブルコンテンツが表示されます。ヘッダーには何も付いていないので、私は追加の機能を呼び出すことはありません。

テーブルの内容を表示するためにページをクリックする必要がある理由を誰かに説明することはできますか？

Answer 1

this.bugsDbRef.onはAngular2ゾーンの内側にないので、値を取得してモデルを更新するとAngularはそれを知らず、クリックすると変更検出が起動して検出されますコンポーネントが変更され、それに従ってビューが更新されます。おそらく、これのいずれかを実行する必要があり

：

ランゾーン内のプッシュ：

constructor(private zone:NgZone){} 

this.zone.run(()=>{ 
    this.bugs.push(bug); 
}) 

それとも

実行detectChangesプッシュ

constructor(private cd:ChangeDetectorRef){} 
    this.bugs.push(bug); 
    this.cd.detectChanges(); 

以降に

setTimeoutを内側

実行それを

setTimeout(()=>{ 
     this.bugs.push(bug); 
    }); 

ところで、あなたは非同期パイプを使用して、それがより明確にすることができます。

<tbody> 
    <tr *ngFor="let bug of bugs | async"> 
     <td>{{ bug.title }}</td> 
     <td>{{ bug.status }}</td> 
     <td>{{ bug.severity }}</td> 
     <td>{{ bug.description }}</td> 
     <td>{{ bug.createdBy }}</td> 
     <td>{{ bug.createdDate }}</td> 
    </tr> 
</tbody> 

とあなたのサービス：

getAddedBugs() { 
    this.bugService.getAddedBugs(); // remove the subscribe 
}