Как получить списки элементов в базе данных Firebase - PullRequest
Новая
       17

Как получить списки элементов в базе данных Firebase

1 голос
/ 28 марта 2020

У меня следующая структура базы данных

enter image description here

Я пытаюсь получить 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 основной список?

1 Ответ

1 голос
/ 29 марта 2020

Ваш 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);
});

Затем вам нужно l oop через 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>

Я не проверял их, поэтому следите за опечатками.

Также не забудьте unsubscribe в ngOnDestroy.

Вы также спрашивали, как удалить определенный c элемент из списка некоторых категорий.

Для этого вам необходимо знать ключ элемента списка Menulist. Замените 

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();
...