试图了解Angular 2中的承诺

Question

I have created a service for google API and stacked at the promise response. Let me show you my code:

getPromise: Promise<any>;
loadSheets: Array<any>;

constructor(public _checkAuthApiService: CheckAuthApiService) { }

ngOnInit() {
    if (this._checkAuthApiService) {
        this._checkAuthApiService.checkAuth().then(res => {
            if (res && !res.error) {
                this.loadSheetsFunc();
            }
        });
    }

    //setTimeout(function(){},1000); //When i add this it works :(
}

loadSheetsFunc = () => {
    this.getPromise = new Promise((resolve: any, reject: any) => {
        resolve(this._checkAuthApiService.loadSheetsApi())
    });
    this.getPromise.then((res: any) => this.sheetsResults(res));
};

sheetsResults = (res: any) => this.loadSheets = res.result.values;

not sure what i am missing but when i add seTimeout within ngOnInit ti works i get the data i want on the view. Can someone help me with this code or perhaps suggest me a better way using Observables. Thank you in advance.

Answer 1

The setTimeout() causes a full Angular2 change detection cycle, which is why this makes Angular2 recognize the updated property.

That Angular2 doesn't recognize the update without setTimeout() indicates an issue with polyfills (perhaps loading order).

I would make a few changes to your code

loadSheets: Array<any>;

constructor(public _checkAuthApiService: CheckAuthApiService) { }
ngOnInit() {
    if (this._checkAuthApiService) {
        this._checkAuthApiService.checkAuth().then(res => {
            if (res && !res.error) {
                this.loadSheetsFunc();
            }
        });
    }
}

loadSheetsFunc() {
    this._checkAuthApiService.loadSheetsApi()
    subscribe(val => this.sheetsResults(res));
}

sheetsResults(res: any) {
    this.loadSheets = res.result.values;
}

I don't know though what loadSheetsApi() returns (assuming Observable ).