如何获取 firebase 数据库中的列表项

Question

我有以下数据库结构

我想做的是让 menulist 嵌套在 Categories 主列表中。我在获取 Categories 时没有问题，但我尝试获取 menulist 的列表。我有空白页。

代码

  ngOnInit() {
    this.categories = this.af.list("Categories")

    this.categories.snapshotChanges()
    .pipe(
      map(changes =>
        changes.map(c => ({ $key: c.payload.key, ...c.payload.val() }))
      )
    ).subscribe((data: any) => {
      this.categories = data

      console.log(this.categories);
    })

  }

HTML

<tbody  *ngFor="let item of categories.menulist">
<tr role="row" class="even text-right">
<td class="text-right">{{item.body}}</td>
<td class="text-center">{{item.title}}</td>  
</tr>
</tbody>

知道如何让 menu list 嵌套在 Categories 主列表中吗？

Answer 1

你的menulist是一个对象，但你需要它是一个数组。

一种解决方案是在 TypeScript 中将其设为数组。例如：

subscribe((data: any) => {
    this.categories = data.map(category => {
        const menuKeys = Object.keys(category.menulist || {});
        const menulist = menuKeys.map(menuKey => category.menulist[menuKey]);
        return { ...category, menulist };
    });
    console.log(this.categories);
});

然后您需要遍历 categories 并遍历它们的 menulist 项：

<tbody>
  <ng-container *ngFor="let category of categories">
    <tr *ngFor="let item of category.menulist" role="row" class="even text-right">
      <td class="text-right">{{item.body}}</td>
      <td class="text-center">{{item.title}}</td>  
    </tr>
  </ng-container>
</tbody>

另一个解决方案是使用 keyvalue pipe，像这样：

<tbody>
  <ng-container *ngFor="let category of categories">
    <tr *ngFor="let item of category.menulist | keyvalue" role="row"
                                                class="even text-right">
      <td class="text-right">{{item.value.body}}</td>
      <td class="text-center">{{item.value.title}}</td>  
    </tr>
  </ng-container>
</tbody>

我没有测试这些，所以请注意错别字。

另外别忘了在 ngOnDestroy 中 unsubscribe。

您还询问了如何从某些类别的菜单列表中删除特定项目。

为此，您需要知道菜单项的键。替换

const menulist = menuKeys.map(menuKey => category.menulist[menuKey]);

与

const menulist = menuKeys.map(key => ({...category.menulist[key], key}));

然后你可以做

this.af.object(`Categories/${category.$key}/menulist/${item.key}`).remove();

如何获取 firebase 数据库中的列表项

How to get lists items in firebase database

firebase-realtime-database

angularfire2

angular