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

如果我有一個Angular 2組件，並且從返回異步承諾或可觀察的服務中獲取數據，那麼我怎樣才能調用組件中的方法來顯示該數據？如何在Angular 2的承諾中調用類方法？

@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（）」不再指ChartsComponent類。我怎樣才能調用一個類承諾後的方法？

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

來源

2016-08-03 Quinma

當您使用Arrow functions，該this保持：

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

來源

2016-08-03 21:50:58 acdcjunior

謝謝！你救了我很多頭撞在牆上。 – Quinma

有2個解決方案：

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

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

}

2：使用「自我」

1））使用「綁定方法」（或類似的東西）：

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

你可以找到關於這個方法這麼多的信息，例如：Use of the JavaScript 'bind' method

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

來源

2016-08-03 21:53:12

謝謝，我正在使用第一種解決方案。 –

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

回答

相關問題