javascript - 我无法使用异步管道从 firebase 数据库中检索数据
问题描述
我通过观看 Mosh Hamedani 的 Udemy 课程来学习 Angular 4。在他的应用程序中构建类别列表时,他使用了 AngularFireBase 方法“列表”。我试图复制代码,但异步管道没有显示任何结果。我试图做我的研究,但徒劳无功。
我还读到有些事情发生了变化(https://github.com/angular/angularfire2/blob/master/docs/version-5-upgrade.md)。但是,我的应用似乎根本找不到 valueChanges 方法。另外,db.list 方法根据 VS Code Intellicence 返回我需要的值。
我返回类别的类
import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
@Injectable()
export class CategoryService {
constructor(private db: AngularFireDatabase) { }
getCategories() {
return this.db.list('/categories');
}
}
我尝试在 html 模板中使用类别的类
import { Component } from '@angular/core';
import { CategoryService } from '../../category.service';
@Component({
selector: 'app-product-form',
templateUrl: './product-form.component.html',
styleUrls: ['./product-form.component.css']
})
export class ProductFormComponent {
categories$;
constructor(categoryService: CategoryService) {
this.categories$ = categoryService.getCategories();
}
}
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>
请帮忙,因为我在这里很绝望
解决方案
因此,2 周的调试和解决方法的思考。Angular 4.0.0 适用于 angularfire2 4.0.0-rc.1 和 firebase 4.2.0。问题出在我的 firebase 数据库结构上——我又嵌套了 categories 字段一次。耶稣。
推荐阅读
- javascript - 仅在 FullCalendar 中的特定事件上允许 editable = true
- python - 数组和数字之间的最大值
- c# - 如何使用我的自定义方法扩展控制器类
- vue.js - vue 单文件组件中 sass 模板的 Webpack 编译问题
- javascript - 如果两个关联数组的一个字段值相同,则从两个关联数组中获取一个字段值
- ios - Xcode 中的 iOS 12.0.1 模拟器
- mongodb - 如何在 mongodb 中为聊天应用程序分组记录
- json - angular - 从 JSON 中读取属性名称作为列名,并在列中显示另一个属性值
- java - Lucene 特殊字符搜索
- javascript - 质疑 this.props.onSave 不是函数