Property 'Laden' existiert nicht auf Typ 'SignupPage' (TypeScript)

Question

Hallo nette Mitstreiter von stackoverflow!

Ich bin neu zu MEAN Stack, und immer noch versucht, in die Grundlagen davon zu kommen.

Ich versuche, eine einfache Authentifizierung zu machen. Dies ist der Code:

import { Component } from '@angular/core'; 
import { NavController, LoadingController } from 'ionic-angular'; 
import { Auth } from '../../providers/auth'; 
import { HomePage } from '../home/home'; 

@Component({ 
    selector: 'signup-page', 
    templateUrl: 'signup-page.html' 
}) 
export class SignupPage { 

    role: string; 
    email: string; 
    password: string; 

    constructor(public navCtrl: NavController, public authService: Auth, public loadingCtrl: LoadingController) { 

    } 

    register(){ 

    this.showLoader(); 

    let details = { 
     email: this.email, 
     password: this.password, 
     role: this.role 
    }; 

    this.authService.createAccount(details).then((result) => { 
     this.loading.dismiss(); 
     console.log(result); 
     this.navCtrl.setRoot(HomePage); 
    }, (err) => { 
     this.loading.dismiss(); 
    }); 

    } 

    showLoader(){ 

    this.loading = this.loadingCtrl.create({ 
     content: 'Authenticating...' 
    }); 

    this.loading.present(); 

    } 

} 

und das ist der Fehler, den ich bekommen:

[12:43:17] typescript: src/pages/signup-page/signup-page.ts, line: 31 
      Property 'loading' does not exist on type 'SignupPage'. 

     L30: this.authService.createAccount(details).then((result) => { 
     L31: this.loading.dismiss(); 
     L32: console.log(result); 

[12:43:17] typescript: src/pages/signup-page/signup-page.ts, line: 35 
      Property 'loading' does not exist on type 'SignupPage'. 

     L34: }, (err) => { 
     L35:  this.loading.dismiss(); 
     L36: }); 

[12:43:17] typescript: src/pages/signup-page/signup-page.ts, line: 42 
      Property 'loading' does not exist on type 'SignupPage'. 

     L42: this.loading = this.loadingCtrl.create({ 
     L43: content: 'Authenticating...' 

[12:43:17] typescript: src/pages/signup-page/signup-page.ts, line: 46 
      Property 'loading' does not exist on type 'SignupPage'. 

     L46: this.loading.present(); 

[12:43:17] transpile failed 

Wer kann mir erklären, was ich vermisse und was soll ich studieren mit meinem Projekt geht es weiter?

Answer 1

Das Problem ist in Ihrer showLoader() Methode. Sie tun:

this.loading = this.loadingCtrl.create({ 
    content: 'Authenticating...' 
}); 

this.loading.present(); 

Diese im Klar Javascript Rechts Code sein kann, aber Typoskript beschwert sich, weil Sie keine loading Eigenschaft in der Klasse definiert haben. Gerade definieren die Eigenschaft wie:

export class SignupPage { 

    role: string; 
    email: string; 
    password: string; 
    loading: LoadingController; //I'm assuming that's the correct type 

    constructor(public navCtrl: NavController, public authService: Auth, public loadingCtrl: LoadingController) { 

    } 
.... 
} 

Answer 2

Try This ...

export class SignupPage { 
 

 
    role: string; 
 
    email: string; 
 
    password: string; 
 
    loading: any; 
 

 
    constructor(public navCtrl: NavController, public authService: Auth, public loadingCtrl: LoadingController) { 
 

 
    } 
 
.... 
 
}