打字稿错误类型&#39;AngularFireList <ProfileResto> &#39;不可分配给&#39;AngularFireList&#39;类型 <ProfileResto[]> “

Question

背景

我正在使用ionic 4 + angularfire + 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

只需按照错误消息查看需要更改的内容。 this.afDatabase.list( profile-resto/ )返回AngularFireList<ProfileResto> ，因此应为restoProfileRef的类型。 （ AngularFireList<ProfileResto[]>将是一个数组列表。）同样，修复此问题后，您将看到restoProfileData的类型必须为Observable<AngularFireAction<DatabaseSnapshot<ProfileResto>>[]> 。 Re Cannot find name 'RestoProfile' ，我假设您的意思是ProfileResto ？

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