Question

我正在尝试从Firebase检索称为“ availableExercises”的集合。我正在使用rxjs 6，当我在对象上映射并分配值时，出现了一些错误。

该应用程序仍然可以运行，但是我对此错误感到非常困惑。

我的运动模型如下：

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对象的数组，但是却得到一个通用对象的数组。

创建return {类型的对象并返回它，而不是执行Exercise。

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;

我还建议在您的收藏夹中定义一种类型。

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

从Firestore中以角度应用类型错误获取数据

1 个答案: