ТипError: Не удается прочитать свойство 'present' of undefined

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 контекст, когда просто передавая ссылку на функцию.

Я бы посоветовал использовать лямбды (или функцию толстой стрелки) везде, где вы передаете функции в качестве параметров. Не только у вас есть ваш this контекст из нужного класса/области, но он более читабельен и согласован.

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

---

Действительно хорошо читать, когда использовать лямбды: 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 docspresent() возвращает 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);

Вы можете сделать это в ионным/angular2-полосная путем добавления этого кода в вашем button:

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