如何解决:错误:未捕获(承诺):TypeError:this.afAuth.authState.take不是函数?

时间:2018-10-02 07:33:51

标签: javascript angular firebase ionic-framework

我一直尝试在Ionic App上打开此页面,但是每次这样做,我都会收到以下错误消息:

  

错误:未捕获(承诺):TypeError:this.afAuth.authState.take不是函数

这很令人沮丧,因为它以前就可以工作!我不知如何解决此错误。我从rxjs / operators导入了“ take”,然后从rxjs / add / operator / take导入了...什么都没用。

以下分别是我的TS和HTMl。

import { Component, OnInit } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

//Firebase imports
import { AngularFireAuth } from '@angular/fire/auth';
import { AngularFireDatabase, AngularFireList } from '@angular/fire/database';

//Model import
import { list } from '../../models/list.interface';

//Pages import
import { HomePage } from '../home/home';
import { Observable } from 'rxjs';

import { take } from 'rxjs/add/operator/take';

@IonicPage()
@Component({
  selector: 'page-add-list',
  templateUrl: 'add-list.html',
})
export class AddListPage implements OnInit{

  list = {} as list;
  newListRef$: AngularFireList<list[]>;

  constructor(public navCtrl: NavController, 
    public navParams: NavParams, 
    private db: AngularFireDatabase,
    private afAuth: AngularFireAuth) {
  }

  ngOnInit(){
    this.afAuth.authState.take(1).subscribe(auth => {
      this.newListRef$ = this.db.list('list/'+auth.uid+'/');
    });
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad AddEventPage');
  }
  
  createNewList1(list: list) {
      this.newListRef$.push({
        name: this.list.name,
        color: this.list.color
      });
      this.navCtrl.push(HomePage);
    }
  
}
<ion-header no-border>
    <button clear id="close" ion-button navPop><ion-icon name="close"></ion-icon></button>
</ion-header>
<ion-content padding>

    <div class="title"><p>Add New List</p></div>
    
    <div class="list">
      <ion-item>
        <ion-label color="secondary" stacked>List Name</ion-label>
        <ion-input type="text" [(ngModel)]="list.name"></ion-input>
      </ion-item>
    
      <ion-item>
        <ion-label color="secondary" stacked>Color</ion-label>
        <ion-select interface="popover" [(ngModel)]="list.color">
            <ion-option value="#89adbb">Pewter Blue</ion-option>
            <ion-option value="#496cbf">Queen Blue</ion-option>
            <ion-option value="#a7545b">Middle Red</ion-option>
            <ion-option value="#e6927e">Dark Salmon</ion-option>
        </ion-select>
      </ion-item>
    </div>
    
    <div class="button"><button ion-button (click)="createNewList1(list)">ADD LIST</button></div>
</ion-content>

任何帮助将不胜感激!谢谢!

1 个答案:

答案 0 :(得分:0)

this.afAuth.authState.take(1).subscribe()中的属性 authState 不需要 .take()方法。因此,本质上 .take()不适用于 authState 。因此,错误返回它不是有效的函数。有道理!