为什么我的firebase/angularfire查询返回可观察到的而不是数据？

Question

我的其他 Firebase 查询返回数据，但我今天编写的查询返回 Observable 而不是数据。这意味着什么？为什么不返回数据？ Observable 是否就像一个未兑现的承诺，意味着我们正在等待数据库发送数据？

import { Component, Input, Inject, } from '@angular/core';
import { Observable } from 'rxjs';

// Firebase
import { AngularFirestore, AngularFirestoreDocument } from '@angular/fire/compat/firestore';

// types
import { L2Language } from '../../services/home-toolbar/home-toolbar.service';
import { LearningModes } from '../../services/home-toolbar/home-toolbar.service';

// services
import { HeaderToolbarService } from '../../services/header-toolbar/header-toolbar.service';

export interface ClipInMovieWatching { clip: number; };

@Component({
  selector: 'app-videos-vocabulary',
  templateUrl: './videos-vocabulary.component.html',
  styleUrls: ['./videos-vocabulary.component.css']
})
export class VideosVocabularyComponent {
  userUid: string | undefined = undefined;

  private clipInMovieWatchingDoc: AngularFirestoreDocument<ClipInMovieWatching>;
  clipInMovieWatching: Observable<ClipInMovieWatching | undefined>;

  constructor(
    private firestore: AngularFirestore,
    @Inject(HeaderToolbarService) private headerToolbarService: HeaderToolbarService
  ) { }

  videoSelector() {
    this.headerToolbarService.getUser().subscribe((user: any) => {
      this.userUid = user.uid;
      console.log(this.userUid); // √ this works
      this.clipInMovieWatchingDoc = firestore.collection('Users').doc(this.userUid).collection('English').doc('Videos').collection('Walker_Climbs_a_Tree').doc<ClipInMovieWatching>('Clip_In_Movie_Watching');
      this.clipInMovieWatching = this.clipInMovieWatchingDoc.valueChanges();
      console.log(this.clipInMovieWatching);
      console.log(this.clipInMovieWatching.clip);

    })
  }

}

这是我的 Firestore 数据库：

我期望

console.log(this.clipInMovieWatching);

返回一个对象，但返回一个 Observable。

我期望

console.log(this.clipInMovieWatching.clip);

返回 5 但收到错误

Property 'clip' does not exist on type 'Observable<ClipInMovieWatching | undefined>'.

Do I need to put a ? 某处（因为类型 undefined 上不存在属性）？

我为文档 ClipInMovieWatching 制作了一个界面，它只有一个属性clip。

我使用 Firebase Auth 方法从组件中引入了 userUid。

我创建了两个变量 clipInMovieWatchingDoc 和 clipInMovieWatching。

当调用 videoSelector() 方法时，它会获取 userUid，然后调用 Firestore。 Firestore 路径是深度嵌套的，但我已经检查了一百万次，并且尝试使用另一个文档的较短路径并得到相同的结果。

Answer 1

我让它起作用。

在视图中，我将其提出：

<div>
    Clip: {{ (clipInMovieWatching | async)?.clip }}
</div>

在视图中显示值。这表明Firestore查询正在起作用。

要使用组件控制器中的值，我在a 关于valuechanges。这是一个角度事件，而不是壁炉功能。

我改变了这些行

console.log(this.clipInMovieWatching);
console.log(this.clipInMovieWatching.clip);

：

 this.clipInMovieWatching.subscribe(x => {
        console.log(x?.clip);
      })