首页 文章

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

提问于
浏览 次
0

我正在尝试学习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显示，但汽车和自行车从未显示 . 我哪里出错了？

javascript angular rxjs

2 回答

  • 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 时，你可以用这种方法轻松分离它们 .

    回复于
  • 1

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

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

相关问题