Question

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

我尝试将数据设置为初始值，ngOnInit和subscriber函数中的值，并且initial和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显示，但汽车和自行车从未显示过。我哪里出错？

Answer 1

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

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

Answer 2

如果您执行以下操作，那么您不会尊重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时，您可以使用此方法轻松分离它们。

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

2 个答案: