我无法将数据添加到下拉列表中

Question

我有称为类别的数据。我能够从 firebase 获取数据但是我在将数据添加到下拉列表时遇到了一些问题。我可以在控制台上看到数据。我通过 Firebase 获取数据。

.html

<div class="container mt-5">
  <div class="row justify-content-center">
   <div class="col-6">
        <h5>Choose Category</h5>
        <select class="form-select" >
          <option *ngFor="let category of categories">{{category?.name}} 
          </option>
        </select>
   </div>
  </div>
 </div>

.ts

export class ProfileUpdateTwoComponent implements OnInit {

  categories: Category[] = []

  constructor(public realtime: RealtimeService) { }

  ngOnInit() {
    this.listCategory()
    console.log(this.categories)
  }

   listCategory(){
      this.realtime.listCategory().snapshotChanges().subscribe(data=>{
      data.forEach(k=>{
        const x = { ...k.payload.toJSON(), key:k.key}
        this.categories.push(x as Category)
      })
    })
  }

}

Console HTML

Answer 1

您可能需要将异步管道添加到您的 ngFor 语句中。您是否在控制台中收到任何错误消息？

<option *ngFor="let category of categories | async">{{category?.name}} 
</option>

我还建议从 rxjs 导入 Observable

import { Observable } from 'rxjs';

然后将您的类别对象更新为以下内容

categories: Observable<Category[]>;

然后将异步管道添加到您的 *ngFor 循环中。

我无法将数据添加到下拉列表中

I'm not able to add data into the dropdown

angular

angularfire