4

我在用什么

  • 角 5
  • 角火5
  • Firebase 和 Firestore

我想要达到的目标

我目前正在使用 Google Firebase 的新 Firestore 在学习 Angular 的同时创建一个新应用。我的应用程序当前创建了一个名为Links的集合，并创建了一个具有自定义 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 文件而不是模板中执行此操作。

4

1 回答 1

6

这是将文档作为 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 中，您可以打开 observable 并显示 URL 属性。

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

或者，可以通过在 TS 中的某处手动订阅来解包它，但您也应该在 NgOnDestroy 期间取消订阅以避免内存泄漏。

this.link.subscribe(data => console.log(data) )
于 2017-11-26T22:16:21.117 回答