在离子3 Angular 4 Firebase移动应用程序中记录时的错误 - 错误:未定义用户名

Question

我正在尝试使用Ionic 3和Firebase创建一个简单的聊天应用程序。注册和登录用户的工作。

用户在login.html中提供用户名，我想稍后在chat.html页面上使用此用户名。这是登录后即将出现的下一页。我正在使用离子存储来获取并设置用户名（电子邮件地址）。我看不到聊天页面上的用户名。

尝试离子服务时，我会在控制台上登录：ionviewDidload chatpage

聊天室后有一个空间，这是用户名的初始值。我希望它可以更改为用户用户名登录的当前。我正在尝试在chat.ts中的ionviewDidload（）中获取此值：

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { AngularFireDatabase } from 'angularfire2/database';
import { Storage } from '@ionic/storage';
@IonicPage()
@Component({
  selector: 'page-chat',
  templateUrl: 'chat.html',
})
export class ChatPage {
  username: string= '';
  message: string= '';
  constructor(public db: AngularFireDatabase, public navCtrl: NavController, public navParams: NavParams, private storage: Storage) {
    this.storage.get('username').then((val) => {
      if (val != null) {
        this.username= val;
      }
    });
  }
  sendMessage() {
    this.db.list('/chat').push({
      username: this.username,
      message: this.message
    })
  }
  ionViewDidLoad() {
    let username= '';
    this.storage.get('username').then((val) => {
      if (val != null) {
        username= val;
      }
    });
    console.log('ionViewDidLoad ChatPage', username);
  }
}

login.html：

<ion-header>
  <ion-navbar>
    <ion-title>
      Login
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <ion-list>
  <ion-item>
    <ion-label floating>Username</ion-label>
    <ion-input type="text" [(ngModel)]= "username"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label floating>Password</ion-label>
    <ion-input type="text" [(ngModel)]= "password"></ion-input>
  </ion-item>
  </ion-list>
  <div padding>
    <button ion-button (click)="signInUser()">Sign in</button>
  </div>
</ion-content>

login.ts：

import { Component} from '@angular/core';
import { IonicPage, NavController, AlertController, NavParams } from 'ionic-angular';
import { AngularFireAuth } from 'angularfire2/auth';
import { ChatPage } from '../chat/chat';
import { Storage } from '@ionic/storage';
@IonicPage()
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {
  username: string= '';
  password: string= '';
  constructor(private fire: AngularFireAuth, public navCtrl: NavController, private alertCtrl: AlertController, public navParams: NavParams, private storage: Storage)
  {
    this.storage.get('username').then((val) => {
      if (val != null) {
        this.username= val;
      }
    });
  }
  ionViewDidLoad() {
    console.log('ionViewDidLoad LoginPage');
  }
  alert(message: string) {
    this.alertCtrl.create({
      title: 'Info!',
      subTitle: message,
      buttons: ['OK']
    }).present();
  }
  signInUser() {
    this.storage.set('username', this.username);
    this.fire.auth.signInWithEmailAndPassword(this.username, this.password).then(data=> {
    console.log('got data', this.fire.auth.currentUser);
    this.alert('Success! You're logged in');
    this.navCtrl.push(ChatPage);
    }).catch(error => {
      console.log('got an error', error);
      this.alert(error.message);
    })
    console.log('Would sign in with ', this.username, this.password)
  }
}

Answer 1

删除SignInuser函数中的前两行。

signInUser() {
    this.fire.auth.signInWithEmailAndPassword(this.username, this.password).then(data=> {
    console.log('got data', this.fire.auth.currentUser);
    this.alert('Success! You're logged in');
    this.navCtrl.push(ChatPage);
    }).catch(error => {
      console.log('got an error', error);
      this.alert(error.message);
    })
    console.log('Would sign in with ', this.username, this.password)
}

使用离子存储