angular - 我无法将数据添加到下拉列表中
问题描述
我有称为类别的数据。我能够从 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)
})
})
}
}
解决方案
您可能需要将异步管道添加到您的 ngFor 语句中。您是否在控制台中收到任何错误?
<option *ngFor="let category of categories | async">{{category?.name}}
</option>
我还建议从 rxjs 导入 Observable
import { Observable } from 'rxjs';
然后将您的类别对象更新为以下
categories: Observable<Category[]>;
然后将异步管道添加到您的 *ngFor 循环中。
推荐阅读
- powerquery - 根据列名条件填充条件列
- ms-access - 按月过滤
- excel - vba 子函数调用时间 chell line Down Error
- javascript - 在 JS 中减去 qty 仅在某些时候不起作用
- javascript - 当幻灯片到达末尾时,如何向 swiper.js 中的容器添加一个类?
- php - 如何从 ACF 日期选择器月份获取前 3 个字符?
- javascript - 如果arraylist中有重复值,如何删除重复项和导致javascript中重复的第一项
- javascript - javascript和node中的移动自动化框架设计问题
- javascript - cordova 捕获音频,并获取文件路径
- node.js - [NodeJS]:在路由之后重定向>在重定向之前调用的函数>我们可以在函数调用之后重定向吗?