我无法使用异步管道从Firebase数据库检索数据

时间:2018-06-26 17:19:07

标签: javascript angular firebase asynchronous firebase-realtime-database

我正在通过观看Mosh Hamedani的Udemy课程学习Angular 4。在他的应用程序中建立类别列表时,他使用了AngularFireBase方法“列表”。我试图复制代码,但是异步管道未显示任何结果。我试图做我的研究,但徒劳。

我还阅读到某些内容已更改(https://github.com/angular/angularfire2/blob/master/docs/version-5-upgrade.md)。但是,我的应用程序似乎根本找不到valueChanges方法。另外,db.list方法根据VS Code智能许可证返回我需要的值。

我返回类别的班级

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>

请帮助,因为我在这里很拼命

1 个答案:

答案 0 :(得分:0)

因此,需要2周的调试和解决方法的思考。 Angular 4.0.0可以与angularfire2 4.0.0-rc.1和firebase 4.2.0一起正常工作。问题出在我的Firebase数据库结构上-我又一次嵌套了类别字段。耶稣。