アングル2の約束の中でクラスメソッドを呼び出すにはどうすればよいですか？

Question

私は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クラスを参照していることではありません。私はどのようにしてクラスメソッドを約束どおりに呼び出すことができますか？

また、他のクラスプロパティを使用する必要があるため、promiseの中にdrawChart（）を配置することはできません。

Answer 1

あなたがArrow functionsを使用する場合は、thisが保たれている：

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

Answer 2

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) 

あなたは、たとえば、この方法についてたくさんの情報を見つけることができます：それはコードをより透明にすることができますので、Use of the JavaScript 'bind' method

私は、最初のソリューションを好みます。