Question

我有一个界面Weather。我正在尝试为组件内的接口创建一个对象数组。以下代码是我的界面：

export interface Weather {
    city: String;
    temp: String;
    description: String;
}

现在我正在尝试在我的组件中创建一个对象数组，这是我的组件文件：

export class AppComponent {
  title = 'Ng-Weather';
  weather: Weather[] = [];
  constructor(private weatherService: WeatherService) { }    
  search(cityName) {
    this.weatherService.getWeatherbyName(cityName)
      .subscribe(this.storeData);
  }
  storeData(data: Weather) {
    this.weather.push(data);
    console.log('weather: ' + this.weather);
  }
}

我在控制台上遇到的错误是： ERROR TypeError: Cannot read property 'push' of undefined

Answer 1

...subscribe(this.storeData.bind(this))

或使用箭头功能

<强> [UPDATE]

所以，基本上，发生的事情是众所周知的this - 问题：当您的subscription获得实际值时，this不再指向组件但是谁知道什么（如果没有特别的话，那么到浏览器window对象）。因此，您需要做的是将bind的{{1}}范围转移到您提供给this的函数，或者您需要使用所谓的箭头函数，因为它们不要创造新的范围;类似的东西：

subscribe

Answer 2

传递箭头函数来订阅以保留组件类的上下文; 箭头函数不会创建自己的this，使用封闭执行上下文的this值。更多阅读https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

 .subscribe((data)=> this.storeData);

或

this.storeData.bind(this)

Answer 3

您没有使用订阅中的返回数据。正如dee zg所说，你可以使用这样的箭头函数：

this.weatherService.getWeatherbyName(cityName) .subscribe( data => this.storeData(data) );

Angular - 无法读取属性＆＃39;推送＆＃39;即使在初始化之后仍未定义

3 个答案: