javascript - 如何在 Angular 2 的 promise 中调用类方法?

标签 javascript angular promise

如果我有一个 Angular 2 组件,并且我从返回异步 promise 或可观察对象的服务中获取数据,那么我该如何调用组件中的方法来显示该数据?

@Component({
  moduleId: module.id,
  selector: 'charts',
  templateUrl: 'charts.component.html',
  providers: [DataService]
})
export class ChartsComponent implements OnInit {

  constructor(private dataService:DataService)

  ngOnInit() {
    this.getData();
  }

  getData(){
    this.dataService.getData().then(function (data) {
      this.drawChart(data);
    });
  }

  drawChart(){
     //implement drawing chart
  }
}

问题在于“this.drawChart()”中的“this” promise 不再引用 ChartsComponent 类。如何在 promise 后调用类方法?

此外,我不能将 drawChart() 放入 promise 中,因为它需要使用其他类属性。

最佳答案

当您使用 Arrow functions 时, this 被保留:

getData(){
  this.dataService.getData().then((data) => { // <-- changed here
    this.drawChart(data);
  });
}

关于javascript - 如何在 Angular 2 的 promise 中调用类方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38754029/

相关文章:

Javascript减法给出意想不到的值(value)

Angular 2 ngModelChange旧值

javascript - Ag-grid 高亮单元格逻辑无法正常工作

ember.js - 使用 emberJS 和 Handlebars 显示来自 promise 的 map

asynchronous - 使用 redux-api-middleware 链接异步操作

函数内的 JavaScript 通过变量名调用函数

javascript - JSON.parse 返回 [Object Object] 而不是值

typescript - 使用 Promise.all() 优化多个 api 请求

javascript - 使 gif 出现在单击按钮上

angular - 如何修复错误 : Type FroalaEditorModule does not have 'ngModuleDef' property Using Froala Wysiwyg