内容只出现在页面上，当我点击 [英] content only appears on page when I've clicked

问题描述

我已经通过Angular 2应用程序连接到Firebase 3，没有什么特别的，只是一个简单的表，其中包含一小组数据。

在服务里面创建了服务我创建了一个监听器事件，如下所示：

  getAddedBugs（）：Observable< any> {
 return Observable.create（obs => {
 this.bugsDbRef.on（'child_added'，bug => {
 const newBug = bug.val（） b $ b obs.next（newBug）; 
}，
 err => {
 obs.throw（err）
}）; 
}）; 
} 
  

我将这个服务注入到我的bug.component.ts中，并调用给定的函数如上所述：

  getAddedBugs（）{
 this.bugService.getAddedBugs（）。subscribe（bug => { 
 this.bugs.push（bug）; 
}，
 err => {
 console.error（无法添加bug  - ，err）; 
}）; 
 
 
 
 $ b $ p 
 $ b 
填充一个数组，然后我可以在HTML并建立表格内容，如下所示： 
 
 
 < tbody> 
< tr * ngFor =让bug的bug> 
< 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 中的表格内容就会出现？并没有我没有什么东西连接头，所以我没有调用任何额外的功能。
 
 
有人可以向我解释为什么我必须点击页面看到表内容出现？ 
解决方案
我假设你的问题是 this.bugsDbRef.on 是而不是在Angular2区域内，所以当它获取值并更新模型时，Angular不知道它，当你点击时，变化检测启动并检测到组件的变化并相应地更新视图。
 
 
 
您可能需要执行以下操作之一：
 $ b 在区域内运行推送： 
 
 
 构造函数（private zone：NgZone）{} 
 
 this.zone.run（（）=> {
 this .bugs.push（bug）; 
}）
  
或 
 
 
在push之后运行detectChanges 
 $ b $ pre $ 构造函数（private cd：ChangeDetectorRef）{} 
 this.bugs.push（bug）; 
 this.cd.detectChanges（）; 
  

或



在setTimeout （$）

$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ ）;


顺便说一句，您可以通过使用异步管道来更加清楚：

 < tbody> 
< tr * ngFor =让bug | 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（）; //删除订阅
} 
  

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 have created service inside the service I have created a listener event as shown here:

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

I inject this service into my bug.component.ts and call the given function specified above :

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

this populates an array, which I'm then able to loop over within the HTML and build the table content as shown here:

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

The issue I have is when I load the page I see nothing on the page, however when I click on the page, i.e the table headers for example then table content within the *ngFor then appears? and no I don't have anything wired up for the headers so I'm not calling any additional functions.

Can someone explain to me why I have to click the page to see the table content appear?

解决方案

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
}

这篇关于内容只出现在页面上，当我点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！