可观察数据集未在模板中更新答案

【问题标题】：Data set in observable not updating in template可观察数据集未在模板中更新
【发布时间】：2017-02-03 20:10:40
【问题描述】：

我正在尝试学习 Angular 2，并正在使用 Angular CLI 重建我使用 Angular 2 制作的 Angular 1 应用程序。我已经设置了一个成功触发的 HTTP GET 请求，并设置了一个订阅者来解释结果，并且订阅者函数中的控制台日志显示了我期望的数据。但是，模板上没有数据正在更新。

我尝试将数据设置为初始值、ngOnInit 和订阅者函数中的值，并且初始值和 ngOnInit 会相应地更新模板。对于我的生活，我无法弄清楚为什么模板不会在订阅时更新。

events: any[] = ['asdf'];

constructor(private http: Http) {
}

ngOnInit() {
    this.events = ['house'];
    this.getEvents().subscribe(this.processEvents);
}

getEvents(): Observable<Event[]> {
    let params: URLSearchParams = new URLSearchParams();
    params.set('types', this.filters.types.join(','));
    params.set('dates', this.filters.dates.join(','));
    return this.http
        .get('//api.dexcon.local/getEvents.php', { search: params })
        .map((response: Response) => {
            return response.json().events;
        });
}

processEvents(data: Event[]) {
    this.events = ['car','bike'];
    console.log(this.events);
}

数据正在通过 ngFor 显示，但汽车和自行车从不显示。我哪里出错了？

【问题讨论】：

标签： javascript angular rxjs

【解决方案1】：

如果你做这样的事情，你不尊重 TypeScript 的 this 上下文就错了：

 .subscribe(this.processEvents);

上下文在processEvents 函数中丢失。

你必须要么绑定它：

 .subscribe(this.processEvents.bind(this));

使用匿名函数：

 .subscribe((data: Events) => {this.processEvents(data)});

或者将你的方法设置为类属性：

processEvents: Function = (data: Event[]) => {
    this.events = ['car','bike'];
    console.log(this.events);
}

选择您最喜欢的，但我喜欢最后一个选项，因为当您使用eventListeners 时，您可以使用此方法轻松分离它们。

【讨论】：

谢谢你的解释，我现在明白了。我把它放在一个不同的函数中以避免复制代码，所以我可能会选择你放的第二个选项，但是当我通常这样做时，我可能会选择第三个。谢谢。
我遇到了同样的问题，即看到控制台日志显示更新进度，但模板中没有任何更新，直到完成。你认为我会面临类似的这种小姐使用吗？ stackoverflow.com/q/65060800/958373

【解决方案2】：

不太确定processEvents 发生了什么。如果您想订阅您的回复，请执行以下操作：

this.getEvents()
  .subscribe(data => {
     this.events = data;
});

【讨论】：

或者你可以做 this.getEvents().subscribe(data => { this.processEvents(data) }); ，这并不是 100% 的效率，但是......
好吧，我想既然processEvents 中还有更多内容，我应该为它创建一个函数。但无论是 lambda 函数还是类方法，都重要吗？
不，我完全同意你的看法。如果不需要，请不要创建方法/函数。我只是假设processEvents 函数还有其他功能，因为它确实设置了events 的数组并且可能是必需的。这就是我喜欢 promises 的原因，因为你可以.then 一切...