Невозможно получить ключ firebase5, используя [queryParams] = "{category: c.key}" в html

Question

Я пытаюсь получить название категории, используя уникальный ключ firebase5, чтобы отобразить его в URL, указанном ниже.

Структура БД в базе данных

product.component.html

  <a 
  *ngFor="let c of categories$ | async "
  class="list-group-item list-group-item-action" 
  routerLink="/"
  [queryParams]="{category: c.key}"
  [class.active]="category === c.key"
  >{{c.name}}</a>

product.component.ts

product.service.ts

category.service.ts

Я попробовал следующее исправление согласно firebase5, но оно у меня не сработало.

<a 
  *ngFor="let c of categories$ | async "
  class="list-group-item list-group-item-action" 
  routerLink="/"
  [queryParams]="{category: c.key}"
  >{{ c.payload.val().name }}</a>

Буду признателен за вашу помощь.

Answer 1

Вы используете valueChanges() на getCategories(), который будет возвращать только значения в объектах, а не фактические идентификаторы. Два варианта - либо сохранить идентификатор в объекте, либо использовать snapshotChanges(), как в getAll() в вашем ProductService

Ваш код в getAll() - это в основном то, что вам нужно использовать для получения ключей. Я также склонен хранить свои идентификаторы в объекте, просто чтобы избавиться от необходимости делать snapshotChanges() и использовать правила безопасности, чтобы гарантировать, что они одинаковы.

return this.db.list('/categories').snapshotChanges().pipe(
    map(actions => 
        actions.map(a => ({key: a.key, ...a.payload.val()}))
    )
);