Question

如果我有一个Angular 2组件，并且我从一个返回异步promise或observable的服务中获取数据，那么我如何调用组件中的方法来显示该数据呢？

@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
  }
}

问题在于承诺内部＆＃34;这个＆＃34; in＆＃34; this.drawChart（）＆＃34;不再引用ChartsComponent类。如何调用承诺的类方法？

另外，我不能将drawChart（）放在promise中，因为它需要使用其他类属性。

Answer 1

当您使用example时，会保留this：

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

Answer 2

有两种解决方案：

1）使用＆＃34; self＆＃34;：

     var self = this;
     ngOnInit() {
        self.getData();
     }

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

}

2）使用＆＃34;绑定方法＆＃34; （或类似的东西）：

.then(function (data) {
        this.drawChart(data);
     }).bind(this)

您可以找到有关此方法的大量信息，例如：Use of the JavaScript 'bind' method

我更喜欢第一种解决方案，因为它有助于使代码更加透明。

如何在Angular 2中的promise中调用类方法？

2 个答案: