TypeError：未定義のプロパティ 'present'を読み取ることができません

Question

loading/Toast/AlertをIonic2にコールしようとしています。私がイオン開発に慣れていないので、私はそれを理解することができません。私はそれが愚かな誤りであることを認識しています。

var dg = document.getElementById('btnregis'); 
    dg.onclick =()=> this.presentLoading(); 


    presentLoading() { 
    console.log("Registered"); 
    let loading = Loading.create({ 
     content: "Please wait...", 
     duration: 3000 
    }); 
    this.navController.present(loading); 
    this.Reg_success(); 
} 


    Reg_success() { 
console.log("registration success"); 
     this.Billerlabelview = false; 
     let toast = Toast.create({ 
      message: "Registering...", 
      duration: 3000 
     }); 
     this.navController.present(toast); 
    } 

reg_Success()メソッドが呼び出されていません。同様の例外がスローされます。私は行方不明のものがありますか？

Answer 1

ここで、navControllerは使用されていますか？これでdb.onclickメソッドをバインドできます。

var dg = document.getElementById('btnregis'); 
dg.onclick = this.presentLoading.bind(this); 



    presentLoading() { 
    console.log("Registered"); 
    let loading = Loading.create({ 
     content: "Please wait...", 
     duration: 3000 
    }); 
    this.navController.present(loading); 
} 

Answer 2

関数への参照を渡すだけでは、thisというコンテキストがありません。

パラメータとして関数を渡しているところでは、lambdas（または太い矢印関数）を使用することをお勧めします。適切なクラス/スコープのコンテキストがthisであるだけでなく、読みやすく、一貫性があります。 https://stackoverflow.com/a/23045200/1961059

Answer 3

まず、およびyour'reはNavControllerからpresent()方法を使用しているので、あなたのconstructorでそれを定義していることを確認してください：ラムダを使用する際に

dg.onclick =() => this.presentLoading(); 

---

A本当に良い読み取り

class MyClass{ 
    constructor(navController: NavController) { 
     // Ionic docs also recommends to add the next line to make it easier to understand http://ionicframework.com/docs/v2/2.0.0-beta.9/api/components/nav/NavController/#present 
     this.navController = navController; 
    }  
} 

Ionic docsでご確認いただけますように、present()は012を返します少なくとも最後にではなく、

presentLoading() { 
    console.log("Registered"); 
    let loading = Loading.create({ 
     content: "Please wait...", 
     duration: 3000 
    }); 
    this.navController.present(loading).then(() => { 
     this.Reg_success(); 
    });   
} 

、あなたも、あなたがclickイベントを処理し、代わりにこれをやっている方法を変更することができます：あなたはそれを解決してされるまで待機する必要がありますので、その後あなたReg_successメソッドを呼び出す、 ：

dg.onclick = this.presentLoading.bind(this);

あなたのbuttonにこのコードを追加することでイオン/ angular2ウェイでそれを行うことができます。

<button (click)="presentLoading()">Click me!</button>