content only appears on page when I've clicked

Question

I have connected by Angular 2 application to Firebase 3 nothing to outrageous, just a simple table which contains a small set of data.

Inside my angular 2 application I

Answer 1

I assume your problem is that this.bugsDbRef.on is not inside the Angular2 zone, so when it get's it's values and updates the model, Angular doesn't know about it, and when you click , the change detection fires up and detects the Component changes and updates the view accordingly.

You probably need to do one of this :

Run the push inside the zone :

constructor(private zone:NgZone){}

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

Or

Run the detectChanges after the push

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

Or

Run it inside a setTimeout

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

And by the way, you can make it more clear by using async pipe :

<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>

and your service :

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