从Firebase实时数据库读取数据并使用Angular显示为列表

Question

我正在尝试通过观看视频来实现产品列表，但是该列表未显示我在firebase数据库中列出的产品。有人可以帮忙吗？

product-form.component.html

<div class="form-group">
       <label for ="category">Category</label>
        <select id="category" class="form-control">
            <option value=""></option>
            <option *ngFor="let c of categories$ | async" value="c.$key">
                {{ c.name }}
            </option>
        </select>            
</div>

product-form.component.ts

export class ProductFormComponent implements OnInit {
  categories$;

  constructor(categoryService: CategoryService) { 
    this.categories$= categoryService.getCategories();
  }

  ngOnInit() {
  }

}

category.service.ts

export class CategoryService {

  constructor(private db:AngularFireDatabase) { }


  getCategories() {
    return this.db.list('/categories');


  }
}

我已经在firebase实时数据库中手动输入了类别，如下所示。 类别

Categories in the database

Answer 1

尝试这样：

getCategories() {
    return this.db.list('/categories').snapshotChanges();
}