Как установить справочную базу для элемента списка, щелкнув Angular через firebase

Question

Я новичок в Angular. Я хочу обновить ссылку на список при щелчке по элементу списка.

<ul class="list-unstyled">
  <li  *ngFor="let chap of chapter | async">
    <button  class="list-group-item list-group-item-action bg-light" (click)="getActiveId(chap.ChapterNo)" {{ chap.ChapterName | json }}</button>
  </li>
<ul>

Это код для списка, а действие -

items: Observable<any[]>;

public getActiveId(id: number) {
  console.log(id);
  this.items = this.db.list('/Course/{{id}}').valueChanges();

 }

Когда я нажимаю на элемент списка, правильный идентификатор передается, видно через консоль, но ссылка на список не меняется.

Не могли бы вы рассказать мне, как правильно передать этот идентификатор, чтобы ссылка на список базы данных обновлялась

Answer 1

Переменная интерполяция с использованием {{...}} ограничена шаблонами Angular HTML. Чтобы использовать переменную в компоненте, вы можете попробовать один из следующих вариантов:

Вариант 1

this.items = this.db.list('/Course/' + id).valueChanges();

Вариант 2

this.items = this.db.list('/Course/', id).valueChanges();

Вариант 3

this.items = this.db.list(`/Course/${id}`).valueChanges();