在 angular 应用程序类型错误中从 firestore 获取数据

Question

我正在尝试从名为 "availableExercises" 的 firebase 中检索一个集合。我正在使用 rxjs 6，当我在对象中映射和分配值时，出现了一些错误。

不知何故，应用程序仍然运行s，但我对这个错误感到很困惑。

我的运动模型如下：

export interface Exercise {
  id: string;
  name: string;
  duration: number;
  calories: number;
  date?: Date;
  state?: 'completed' | 'cancelled' | null;
}

这是我正在调用的函数：

 fetchAvailableExercises() {
    this.db
      .collection('availableExercises')
      .snapshotChanges()
      .pipe(
        map(docArray => {
          return docArray.map(doc => {
            return {
              id: doc.payload.doc.id,
              name: doc.payload.doc.data().name,
              duration: doc.payload.doc.data().duration,
              calories: doc.payload.doc.data().calories
            };
          });
        })
      )
      .subscribe((exercises: Exercise[]) => {
        this.availableExercises = exercises;
        this.exercisesChanged.next([...this.availableExercises]);
      });
  }

我运行 ng 服务时出现的错误是：

ERROR in src/app/training/training.service.ts(26,44): error TS2339: Property 'name' does not exist on type '{}'.
src/app/training/training.service.ts(27,48): error TS2339: Property 'duration' does not exist on type '{}'.
src/app/training/training.service.ts(28,48): error TS2339: Property 'calories' does not exist on type '{}'.

这是我的依赖项：

"dependencies": {
    "@angular/animations": "^6.1.0",
    "@angular/cdk": "^6.4.1",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/flex-layout": "^6.0.0-beta.17",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
    "@angular/material": "^6.4.1",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/pwa": "^0.6.8",
    "@angular/router": "^6.1.0",
    "@angular/service-worker": "^6.1.0",
    "angularfire2": "^5.0.0-rc.11",
    "core-js": "^2.5.7",
    "firebase": "^5.3.0",
    "hammerjs": "^2.0.8",
    "rxjs": "^6.2.2",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.7.0",
    "@angular/cli": "^6.0.8",
    "@angular/compiler-cli": "^6.1.0",
    "@angular/language-service": "^6.1.0",
    "@types/jasmine": "^2.8.8",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "^10.5.4",
    "codelyzer": "^4.4.2",
    "jasmine-core": "~3.1.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^2.0.5",
    "karma-chrome-launcher": "~2.2.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^2.0.1",
    "karma-jasmine": "^1.1.2",
    "karma-jasmine-html-reporter": "^1.2.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "^2.7.2"
  }

如果我console.log(doc.payload.doc.data()); 我将预期的数据作为对象获取，如下所示： {calories: 8, duration: 60, name: "Burpees"}

Answer 1

您的订阅需要一个 Exercise object 数组，但它得到的是一个通用 object 数组。

创建 Exercise 类型的 object 而不是 return { 并且 return 那个。

let exercise: Exercise = {
  id: doc.payload.doc.id,
  name: doc.payload.doc.data().name,
  duration: doc.payload.doc.data().duration,
  calories: doc.payload.doc.data().calories
};
return exercise;

我还建议在 collection 上定义一个类型。

this.db.collection<Exercise>('availableExercises')

在 angular 应用程序类型错误中从 firestore 获取数据

Fetching data from firestore in angular app type error

firebase

typescript

angular

rxjs6