Angular& AngularFire 5从文档

时间:2017-11-26 16:54:39

标签: angular firebase angularfire2 google-cloud-firestore angularfire5

我正在使用

  • Angular 5
  • AngularFire5
  • Firebase&公司的FireStore

我正在努力实现

我目前正在使用Google Firebase的新Firestore创建一个新应用,同时学习角度。我的应用程序当前创建了一个名为链接的集合,并创建了一个新文档,其中包含自定义ID ,该文档是在用户添加链接时生成的,并且在该文档中,有4个字段:

  • UID
  • URL
  • SHORTURL
  • 点击

我希望应用在网址字段中查询文档中的数据。

我到目前为止

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

  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文件而不是模板中执行此操作。 / p>

1 个答案:

答案 0 :(得分:4)

以下是将文档作为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) )