登录Ionic 3 + Angular 4 + Firebase移动应用程序时出错 - 错误：未定义用户名

Question

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

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

尝试离子服务时，我在控制台上获取此日志： ionViewDidLoad ChatPage

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)
}

要使用其他页面中的用户名，请使用ionic storage

将其存储在localstorage中