如何在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中，因为它需要使用其他类的属性。

答

当您使用Arrow functions，该this保持：

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

谢谢！你救了我很多头撞在墙上。 – 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

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

谢谢，我正在使用第一种解决方案。 –

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

相关推荐