Angular 5 和 Firestore 嵌套对象答案

【问题标题】：Angular 5 and Firestore Nested ObjectAngular 5 和 Firestore 嵌套对象
【发布时间】：2018-05-11 01:35:19
【问题描述】：

我有一个具有这种结构的 firestorm 集合：

USERID {
    email: "test@test.com"
    name: "John Doe"
    roles{
        user: true
        editor: true
        admin: false
    }
}

我能够将这些数据作为集合获取并呈现在视图中。

component.ts:

constructor(private afs: AngularFirestore) {}

this.userCollection = this.afs.collection('users')
this.users = this.userCollection.valueChanges()

component.html

 <tr *ngFor="let user of users | async;>
      <td>{{ user.firstName }}</td>
      <td>{{ user.lastName }}</td>
      <td>{{ user.roles }}</td>
      <td>{{ user.email }}</td>
      <td>{{ user.job }}</td>
 </tr>

除了显示为 [object Object] 的“角色”之外，一切都正确显示

我可以通过将行更改为来获得要显示的角色

{{ user.roles | json }}

但这仅显示原始 json 数据。如何显示设置为 true 的角色？有没有更好的方法来构建我的数据？

【问题讨论】：

标签： json angular firebase object google-cloud-firestore

【解决方案1】：

角色也是对象。我可以得到这样的财产

 <tr *ngFor="let user of users | async;>
  <td>{{ user.firstName }}</td>
  <td>{{ user.lastName }}</td>
  <td>{{ user.roles.user }}</td>
  <td>{{ user.email }}</td>
  <td>{{ user.job }}</td></tr>

【讨论】：

有没有办法显示设置为 true 的键？
你可以这样试试<td *ngIf="user.roles.user">{{ user.roles.user }}</td>