Angular＆AngularFire 5从文档中检索数据

Question

我在用什么

• 角度5
• AngularFire5
• Firebase和Firestore

我正在努力实现的目标

我目前正在使用Google Firebase的新Firestore在学习角度的同时创建一个新应用。我的应用程序当前创建一个名为Links的集合，并创建一个具有自定义ID的新文档，该自定义ID在用户添加链接（即shorturl）时生成，该文档中包含4个字段：

• uid
• 网址
• 短网址
• 点击次数

我希望应用程序查询url字段中文档内的数据。

到目前为止我有什么

我已经创建了正确文档的路径：

  linkCollection: Observable<{}>;
  constructor(private afs: AngularFirestore, private router: Router) {
      this.path = this.router.url.replace('/','');
      afs.collection('Links').doc(this.path).valueChanges();
  }

我被困在哪里

这可能是一个简单的解决方案，但我不确定如何获取url字段。我拥有的代码能够检索该文档，并且在另一部分中使用类似的方法来检索所有想法，并使用* ngFor显示数据，但不确定如何在ts文件而不是模板中进行操作。

Answer 1

这是将文档作为Observable读取并在组件模板中使用其数据时所遵循的基本模式。

  linkRef: AngularFirestoreDocument<any>;
  link: Observable<any>;
  path: string;

  constructor(private afs: AngularFirestore, private router: Router) {}

  ngOnInit() {
    // 0. this works, but there's probably better ways to get the ID
    this.path = this.router.url.replace('/','');

    // 1. make a reference
    this.linkRef = this.afs.collection('links').doc(this.path)

    // 2. get the Observable
    this.link = this.linkRef.valueChanges();
  }

然后，在HTML中，您可以展开可观察对象并显示URL属性。

{{ (link | async)?.url }}

或者，可以通过手动预订TS中的某个位置来取消包装，但是您也应该在NgOnDestroy期间取消预订，以避免内存泄漏。

{{ (link | async)?.url }}