javascript - Angular 2 : Template not updating after http service update

Question

我仍在努力学习 ng2，所以我确定这是一个常见的菜鸟问题，但我在网上找到的解决方案都没有帮助。有人知道我的问题是什么吗？

我有一个将 getEventList() 方法作为可观察对象的服务

getEventList(): Observable<any>{
    return this.http.get('./assets/data.json')
        .map(response => response.json());
}

我在我的组件中订阅了它

ngOnInit(){
    this.eventService.getEventList()
        .subscribe(events => {
            this.zone.run(()=>{
                this.events = events;
                console.log(this.events)
            });
        });
}

我的模板只是尝试以 json 格式输出事件变量

<p>
    {{
        events | json
    }}
</p>

如您所见，我将事件的值分配给 zone.run() 回调中的局部变量。仍然没有看到我的模板更新。我也尝试过 ApplicationRef.tick 和 ChangeDetectorRef.detectChanges() 但似乎都没有检测到我的更改。

Console.log 调用确实确认数据已更新。在此组件上触发的任何点击处理程序似乎也会更新 View 。

有人知道我在这里做错了什么吗？我发布了足够多的代码以获得一些建议吗？让我知道您还想看到什么。

Answer 1

假设您在调用 getEventList() 方法之前没有为 this.events 赋值，那么应该这样做:

<div *ngIf="events">
{{ events | json }}
</div>