如何在Angular 2中的promise中調用類方法？

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

問題是在“this.drawChart（）”中的promise“this”內部不再引用ChartsComponent類。 如何調用類方法發布承諾？

另外，我不能將drawChart（）放在promise中，因為它需要使用其他類屬性。

Answer 1

當您使用箭頭鍵的功能 ，在this保持：

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

Answer 2

有兩種解決方案：

1）使用“自我”：

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

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

}

2）使用“綁定方法”（或類似的東西）：

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

您可以找到有關此方法的大量信息，例如： 使用JavaScript“bind”方法

我更喜歡第一種解決方案，因為它有助於使代碼更加透明。