javascript - 类型 'Subscription' 不可分配给类型 'Observable<Exercise[]>'

Question

我用

Angular CLI:6.0.8

节点:8.11.3

我刚刚学习了 Udemy - Angular(完整应用程序)以及 Angular Material、Angularfire 和 NgRx。 在第 72 课上聆听值变化 (of_Firestore) 我有一个错误

export class NewTrainingComponent implements OnInit {
  exercises: Observable<Exercise[]>;

  constructor(
    private trainingService: TrainingService,
    private db: AngularFirestore) { }

  ngOnInit() {
    this.exercises = 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(result => {
        console.log(result);
      });
  }

  onStartTraining(form: NgForm) {
    this.trainingService.startExercise(form.value.exercise);
  }

}

error TS2322: Type 'Subscription' is not assignable to type 'Observable'.

error TS2339: Property 'name' does not exist on type '{}'.

error TS2339: Property 'duration' does not exist on type '{}'.

error TS2339: Property 'calories' does not exist on type '{}'.

Answer 1

错误信息非常明显。 exercises 是您定义的一种 Observable:

exercises: Observable<Exercise[]>;

但是您在 ngOnInit() 方法中将其分配给订阅。

你的 ngOnInit() 方法应该像下面这样(不要对 exercises 赋值):

ngOnInit() {
    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(result => {
        console.log(result);
      });
  }