Question

背景

我正在使用Ionic 4 + Anglefire + Firebase制作此应用。 package.json的详细信息在下面提供。

问题

实际上，我在运行ionic serve时有很多错误。但这很奇怪，因为此错误仅在我运行ionic serve之后发生一次。 当我重新保存文件find-resto.ts（没有任何更改）时，问题消失了！！！

它开始困扰我，因为它在ionic pro和Ionic DevApp中引发错误。

以下是错误：

1. Typescript Error Type 'AngularFireList<ProfileResto>' is not assignable to type 'AngularFireList<ProfileResto[]>'. (line 29)
 2. Typescript Error Type 'AngularFireList<ProfileResto>' is not assignable to type 'AngularFireList<ProfileResto[]>'. Type 'ProfileResto' is not assignable to type 'ProfileResto[]'. Property 'length' is missing in type 'ProfileResto' (line 29)
 3. Typescript Error Type 'Observable<AngularFireAction<DatabaseSnapshot<ProfileResto[]>>[]>' is not assignable to type 'AngularFireList<ProfileResto[]>'. (line 30)
 4. Typescript Error Type 'Observable<AngularFireAction<DatabaseSnapshot<ProfileResto[]>>[]>' is not assignable to type 'AngularFireList<ProfileResto[]>'. Property 'query' is missing in type 'Observable<AngularFireAction<DatabaseSnapshot<ProfileResto[]>>[]>'. (line 30)
 5. Typescript Error Type 'AngularFireList<ProfileResto>' is not assignable to type 'AngularFireList<ProfileResto[]>'. (line 33)
 6. Typescript Error Type 'Observable<AngularFireAction<DatabaseSnapshot<ProfileResto[]>>[]>' is not assignable to type 'AngularFireList<ProfileResto[]>'. 
 7. Typescript Error Cannot find name 'RestoProfile'. (line39)

我的代码

这是我的文件 find-resto.ts

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

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

import { ProfileResto } from './../../models/profile-resto';

import { OrderMenuPage } from '../order-menu/order-menu';

@IonicPage()
@Component({
  selector: 'page-find-resto',
  templateUrl: 'find-resto.html',
})
export class FindRestoPage {

  restoProfileRef: AngularFireList<ProfileResto[]>;
  restoProfileData: AngularFireList<ProfileResto[]>;

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

  ionViewDidLoad() {
    this.afAuth.authState.subscribe(data => {
      if(data && data.email && data.uid){
        this.restoProfileRef = this.afDatabase.list<ProfileResto>(`profile-resto/`);
        this.restoProfileData = this.restoProfileRef.snapshotChanges();
      }
      else {
        this.restoProfileRef = this.afDatabase.list<ProfileResto>(`profile-resto/`);
        this.restoProfileData = this.restoProfileRef.snapshotChanges();
      }
    });
  }

  selectResto(restoProfile: RestoProfile){
    this.afAuth.authState.subscribe(data => {
      if(data && data.email && data.uid){
        this.navCtrl.push('OrderMenuPage', {
          restoDataPass: restoProfile
        });
        console.log(restoProfile)
      }
      else {
        this.toast.create({
          message: `Harap masuk/daftar terlebih dahulu`,
          duration: 3000
        }).present();
      }
    });
  }
}

这是我的package.json文件

{
  "name": "menuu",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "start": "ionic-app-scripts serve",
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint"
  },
  "dependencies": {
    "@angular/animations": "5.2.11",
    "@angular/common": "5.2.11",
    "@angular/compiler": "5.2.11",
    "@angular/compiler-cli": "5.2.11",
    "@angular/core": "5.2.11",
    "@angular/fire": "^5.0.2",
    "@angular/forms": "5.2.11",
    "@angular/http": "5.2.11",
    "@angular/platform-browser": "5.2.11",
    "@angular/platform-browser-dynamic": "5.2.11",
    "@ionic-native/core": "~4.15.0",
    "@ionic-native/splash-screen": "~4.15.0",
    "@ionic-native/status-bar": "~4.15.0",
    "@ionic/pro": "2.0.3",
    "@ionic/storage": "2.2.0",
    "firebase": "^5.5.4",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "rxjs": "^6.3.3",
    "rxjs-compat": "^6.3.3",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.2.0",
    "typescript": "~2.6.2"
  },
  "description": "An Ionic project"
}

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

Answer 1

只需按照错误消息查看需要更改的内容。 value返回this.afDatabase.list(profile-resto/)，因此应该是profile-resto/的类型。（AngularFireList<ProfileResto>将是数组的列表。）同样，修复此问题后，您会看到restoProfileRef的类型必须为AngularFireList<ProfileResto[]>。关于restoProfileData，我想你是说Observable<AngularFireAction<DatabaseSnapshot<ProfileResto>>[]>？

关于消失的错误，我已经在Stack Overflow上看到了一些有关该错误的报告，但是我不十分了解所涉及的系统，因此我不值得去研究这种现象。

Typescript错误类型'AngularFireList <profileresto>'不能分配给类型'AngularFireList <profileresto []>'

背景

问题

我的代码

1 个答案: