内容只在我点击时出现在页面上

我已经通过Angular 2应用程序连接到Firebase 3，没有什么可言，只是一个包含一小组数据的简单表格。内容只在我点击时出现在页面上

在我的角度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内的表格内容出现？不，我没有任何东西连接头，所以我没有调用任何额外的功能。

有人能向我解释为什么我要点击页面来查看表内容出现？

来源

2016-12-29 Code Ratchet

的问题是改变检测，这是什么this.bugsDbRef.on？它是否在angular2代码中？ – Milad

@Milad bugsDbRef是我的firebase数据库连接：'private bugsDbRef = this.firebase.database.ref（'/ bugs'）;' –

好吧，你的组件changeDetectionStrategy是什么？ – Milad

我假设你的问题是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 
}

来源

2016-12-29 03:14:25 Milad

内容只在我点击时出现在页面上

回答

相关问题