Question

我已经通过Angular 2应用程序连接到Firebase 3，没有什么可以令人发指的，只是一个包含一小组数据的简单表。

在我的angular 2应用程序中，我在服务中创建了一个服务，我创建了一个监听器事件，如下所示：

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)
        });
    });
}

我将此服务注入我的bug.component.ts并调用上面指定的给定函数：

 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
}

单击时，内容仅显示在页面上

1 个答案: