angular - 从 firebase 实时数据库中读取数据并使用 Angular 显示为列表

Question

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

产品-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>

产品-form.component.ts

export class ProductFormComponent implements OnInit {
  categories$;
  
  constructor(categoryService: CategoryService) { 
    this.categories$= categoryService.getCategories();
  }

  ngOnInit() {
  }

}

类别.service.ts

export class CategoryService {

  constructor(private db:AngularFireDatabase) { }


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


  }
}

我已经手动输入了 firebase 实时数据库中的类别，看起来像这样。类别

数据库中的类别

标签： angularfirebasefirebase-realtime-database

Answer 1

试试这样：

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