Angular Firestore2多根集合查询

时间:2018-08-09 20:51:33

标签: json angular firebase firebase-realtime-database angularfire2

我有一个小型项目学习项目,我正在尝试使用Firebase Realtime DB和Angular 6,并且正在努力了解如何构造数据,以便能够正确查询和显示数据。 目前,我的数据由三个根级别的集合组成。

  {
    "counselors": [
      {
        "id": 0,
        "name": "Delaney Harrison",
        "phone": "+1 (810) 579-2671",
        "updated": "2018-03-06T01:45:36+00:00"
      },
      {
        "id": 1,
        "name": "Lorene Frank",
        "phone": "+1 (954) 508-2215",
        "updated": "2018-07-02T19:55:24+00:00"
      }
    ],
    "cabins": [
      {
        "id": 0,
        "name": "ipsum ex aute",
        "counselor": 0,
        "updated": "2018-05-30T15:08:35+00:00"
      },
      {
        "id": 1,
        "name": "mollit magna ex",
        "counselor": 1,
        "updated": "2018-07-06T13:09:10+00:00"
      }
    ],
    "campers": [
      {
        "id": 0,
        "name": "Eleanor Barrett",
        "cabin": 0,
        "updated": "2018-03-27T10:29:29+00:00"
      },
      {
        "id": 1,
        "name": "Kimberley Castaneda",
        "cabin": 0,
        "updated": "2018-04-04T19:20:55+00:00"
      },
      {
        "id": 2,
        "name": "Terrell Warren",
        "cabin": 1,
        "updated": "2018-05-22T02:35:07+00:00"
      }
    ]
  }

是否可以查询此信息以显示客舱以及分配的辅导员姓名和所有分配的露营者的姓名?最终,我将需要通过UI(特别是露营者)更新这些记录,是否有更好的方法来组织数据以使其变得更容易/更容易?小屋和辅导员不会有太大变化,但露营者会改变。

到目前为止,这是我所有内容中的全部内容,因为我不确定从何处去。

组件TypeScript

cabins: Observable<any[]>;
constructor(private db: AngularFireDatabase) {
  this.cabins = db.list('/cabins').valueChanges();
}

组件模板

<mat-card *ngFor="let cabin of cabins | async">
    <mat-card-title>{{ cabin.name }} - {{ cabin.counselor.name }}</mat-card-title><!-- this obviously doen't show the name as it should... -->
    <mat-card-content>
    <table>
        <thead>
            <tr>
                <th>Camper</th>
            </tr>
        </thead>
        <tr>
            <td>{{ camper.name }}</td><!-- and of course this isn't showing the name as it should either -->
        </tr>
    </table>
    </mat-card-content>
</mat-card>

我已经用尽了Google-fu,空了。我见过的大多数东西都与查询单个集合有关。

0 个答案:

没有答案