Ionic2のtypecriptでTrelloを使用するとPromiseを得ることができません

Question

問題は、プログラムを進める前にデータを利用できるようにしたいので、非同期型関数を使用する必要があります。プロミスはionic.ioのように標準的な方法であるようです。

私は基本的にTrello.comのウェブサイトからカードを作るという非常に簡単な例があります。私はその後、グローバル配列にIDをロードし、それを記録しようとします。

// myTry.ts

import {Component} from '@angular/core'; 
import {NavController, NavParams} from 'ionic-angular'; 
//compile needs this and it seems to make the Trello functions work 
declare var Trello: any; 

@Component({ 
    templateUrl: 'build/pages/mytry/mytry.html' 
}) 
export class MyTryPage { 
    fileEntry: any; 
    myData: any;  
    myList: any = "MyList ID - get this from the sandbox screen in Trello.com please"; 

    newCard = {  
     name: '****My New Test Card', 
     desc: '****This is the description of our new card.', 
     idList: this.myList, 
     pos: 'top' 
    }; 

    readTrello: any = function() { 
     Trello.post('/cards/', this.newCard, this.creationSuccess); 
    } 

    constructor(private navController: NavController) { 

     Trello.authorize({ 
      type: "redirect", 
      interactive: "true", 
      name: "My Application", 
      scope: { 
       read: "true", 
       write: "true" }, 
      expiration: "never", 
      success: this.authenticationSuccess, 
      error: this.authenticationFailure 
     }); 

     this.testPromise(); 

     // this line does not work 
     console.log('My data ' + this.myData); // returns undefined 

    } 

    testPromise: any = function() {  
     var p1 = new Promise(resolve => { 
      this.readTrello(); 
      window.setTimeout(() => { 
       // this line is run after timeout completes so why is data not available 
       console.log("Since this is run after timeout, I expect data to exist???? "+ this.myData); 
       resolve(0); 
      }, 5000); 
     }); 

     p1.then(
      // Log the fulfillment value 
      () => { 
        //This fails - data is NOT available 
        console.log('Promise fullfilled. Data should be available:???? Array is no longer in scope at all????' + this.myData); 

        // I will load into displayable structure here later 

       }) 
     .catch(
      // Log the rejection reason 
      function(reason) { 
       console.log('Handle rejected promise ('+reason+') here.'); 
      }); 
    } 



    authenticationSuccess: any = function() { 
     //This works 
     console.log("Successful authentication"); 
    }; 
    authenticationFailure: any = function() { 
     console.log("Failed authentication"); 
    }; 

    creationSuccess: any = function(data) { 
     //This works 
     console.log('Trello callback successfull'); 
     this.myData = JSON.stringify(data.id); 
     //This works and the data returned is available and correct - great. 
     console.log('Card created successfully. Data returned:' + this.myData); 
    }; 

} 

のスタート私は何か欠けています - データがタイムアウトする前に利用可能であるのではなく、後に???明らかに私のプログラムの流れは間違っています。 ps私はトークンを使用して上記を行うことができますが、Trello公開APIを使用したいと思います。

Answer 1

thisキーワードをその関数本体で使用するときに定義するには、ラムダ関数を使用する必要があります。

代わり window.setTimeout(function() {使用の

window.setTimeout(() => {

p1.thenラインについても同じことを行います。このラインでも

、：代わりにthis.creationSuccessを渡すのTrello.post('/cards/', this.newCard, this.creationSuccess);がthis.creationSuccess.bind(this)