如何使用 Angular 检索和显示嵌入式 Firestore 对象？

Question

我想显示一个 Firestore 模型，其中包含一个配置文件名称和一个描述主题标签的列表 Angular 6.

作为 Firestore 的新手，我了解到我应该像这样建模： enter image description here

members {
          id: xyz
                  {
                    name: Jones;
                    hashtag: {
                              global: true,
                              digital: true
                             }
          ...
         }

现在，我尝试了解如何在我的组件列表中显示每个主题标签属性的键。我当前的代码总是显示 [object Object] 作为结果。我的组件代码是：

import { Component } from '@angular/core';
import { AngularFirestore } from 'angularfire2/firestore';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  items$: Observable<any[]>;
  constructor(db: AngularFirestore) {
    this.items$ = db.collection('Members').valueChanges();
    console.log(this.items$);
  }
}

我的模板代码是：

<p>names and their interests</p>
<div *ngFor="let item of items$ | async">
  <h4>{{item.name}}</h4>
  <ul>
    <li>{{item.hashtag}}</li>
  </ul>
</div>

我该如何解决这个问题？

Answer 1

认为您正在寻找 (Angular 6.1):

<li *ngFor="let hashtag of item.hashtag| keyvalue">
  {{hashtag.key}}:{{hashtag.value}}
</li>

这将做的是获取 item.hastag 的键和值，并让它们在 hastag 中使用。

如何使用 Angular 检索和显示嵌入式 Firestore 对象？

How to retrieve and display an embedded Firestore object with Angular?

json

object

angularfire2

angular

google-cloud-firestore