Question

在以下情况中，我试图在loading/Toast/Alert中呼叫Ionic2。由于我是Ionic开发的新手，我无法弄明白。我知道这是一个愚蠢的错误。

 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上下文，而且更具可读性和一致性。

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

关于何时使用lambdas的一个非常好的读物：https://stackoverflow.com/a/23045200/1961059

Answer 3

首先，因为您使用present()中的NavController方法，请确保在constructor中定义它：

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()中看到的那样，会返回promise，因此您必须等到问题解决后再然后调用你的Reg_success方法：

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

最后但同样重要的是，您还可以更改处理click事件的方式，而不是执行此操作：

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

您可以通过在button中添加此代码，在 ionic / angular2-way 中执行此操作：

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

TypeError：无法读取属性＆＃39; present＆＃39;未定义的

3 个答案: