我无法将数据添加到下拉列表中
I'm not able to add data into the dropdown
我有称为类别的数据。我能够从 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
您可能需要将异步管道添加到您的 ngFor 语句中。您是否在控制台中收到任何错误消息?
<option *ngFor="let category of categories | async">{{category?.name}}
</option>
我还建议从 rxjs 导入 Observable
import { Observable } from 'rxjs';
然后将您的类别对象更新为以下内容
categories: Observable<Category[]>;
然后将异步管道添加到您的 *ngFor 循环中。
我有称为类别的数据。我能够从 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
您可能需要将异步管道添加到您的 ngFor 语句中。您是否在控制台中收到任何错误消息?
<option *ngFor="let category of categories | async">{{category?.name}}
</option>
我还建议从 rxjs 导入 Observable
import { Observable } from 'rxjs';
然后将您的类别对象更新为以下内容
categories: Observable<Category[]>;
然后将异步管道添加到您的 *ngFor 循环中。