Typescript 错误类型 'AngularFireList<ProfileResto>' 无法分配给类型 'AngularFireList<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(<code>profile-resto/) 返回一个 AngularFireList<ProfileResto>，所以它应该是 restoProfileRef 的类型。（AngularFireList<ProfileResto[]> 将是数组 的列表 。）同样，一旦你解决了这个问题，你会看到 restoProfileData 需要是类型 Observable<AngularFireAction<DatabaseSnapshot<ProfileResto>>[]>.关于 Cannot find name 'RestoProfile'，我假设你的意思是 ProfileResto?

关于消失的错误，我在 Stack Overflow 上看到了一些相关报告，但我对所涉及的系统了解不够深，因此值得我尝试调查这一现象。

Typescript 错误类型 'AngularFireList<ProfileResto>' 无法分配给类型 'AngularFireList<ProfileResto[]>'

Typescript Error Type 'AngularFireList<ProfileResto>' is not assignable to type 'AngularFireList<ProfileResto[]>'

rxjs

typescript

ionic-framework

angularfire2

angular

背景

问题

我的代码