【问题标题】：Reading data from firebase realtime database and display as a list using Angular从 firebase 实时数据库中读取数据并使用 Angular 显示为列表
【发布时间】：2020-11-29 12:37:03
【问题描述】：

我正在尝试按照视频来实现产品列表，但该列表没有显示我在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

【问题讨论】：

标签： angular firebase firebase-realtime-database

【解决方案1】：

试试这样：

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

【讨论】：

谢谢@adrita，我尝试了你的建议。类别列表现在填充了 3 个以前未显示的空值。但是名称不显示。
@IndrajitRavi 这可能是因为您已将名称存储在键的对象中。
您能记录下getCategories 在您的组件中返回的内容吗？我没有使用实时数据库，所以我不确定您的数据实际上是如何表示的。
@Edric 谢谢，我在 product-form.html 中将它从 c.name 更改为 c.key 并填充了列表。