Angular4 / AngularFire2 从嵌套 JSON 中获取 (db.list)

Question

我在里面开了一家餐馆，这是一个小费：

这里是 JSON 结构：http://prntscr.com/gn5de8

所以我首先尝试像这样在我重复的餐厅中获取数据：

<p *ngFor="let tip of restaurants[item.$key].tips" [innerHTML]="tip.description"></p>

但这根本行不通。

所以我尝试在 component.ts 中做一个额外的获取：

public restaurants: FirebaseListObservable<any>;
public tips: FirebaseListObservable<any>;

constructor(private db: AngularFireDatabase) {
    this.restaurants = db.list('/restaurants');
    this.tips = db.list(`/restaurants/${key}/tips`);
}

然后尝试重复它们：

<p *ngFor="let tip of tips | async" [innerHTML]="tip.description"></p>

但是在这里我在构造函数中的第二行出现错误：“找不到名称'key'”我的语法有什么问题？这是我试图做的，解决这个问题的正确方法吗？

如果你需要看看这里的 html 和 ts 文件：

HTML：https://pastebin.com/6rEmmrXZ TS：https://pastebin.com/e5CnPqYp

这里是我找到第二次尝试信息的来源： Firebase / Angularfire2: nested data nodes in firebase

最好的问候。

Answer 1

您收到该错误是因为您没有在任何地方定义 key 变量。实现您想要的一种方法是映射餐厅列表，然后将 tips 对象转换为每个餐厅的数组：

this.restaurants = db.list('/restaurants')
  .map(restaurants => restaurants.map(item => ({
    ...item,
    tips: Object.keys(item.tips)
      .reduce((acc, key) => [...acc, item.tips[key]], []);
  });
));

不要忘记导入 map 运算符 (rxjs/add/operator/map)。然后，在您的 HTML 中遍历餐厅列表：

<div *ngFor="let restaurant of restaurants | async">
  <div *ngFor="let tip of restaurant.tips">
    <p [innerHTML]="tip.description"></p>
  </div>
</div>

但是，我不推荐这种方法。我认为你应该重新考虑你的数据结构和数据库调用。

按照您现在的方式，您将调用整个提示列表以及餐厅列表。那将变得太昂贵了。您应该将提示列表分开：

- tips
  - $restaurantKey
    - $tipKey
      ...data

这样，您可以单独调用提示列表 - 仅在需要时。另外，我看不出沿着餐馆列表加载整个提示列表的意义。如果您的应用程序不断增长并且您最终为每家餐厅提供了一些提示，这可能会成为一个大问题。

相反，您可以只提供一个提示摘要。选择餐厅后，您将只显示该餐厅的提示 - 而不是一次加载所有内容。