【问题标题】:I cannot retrieve data from firebase database using async pipe我无法使用异步管道从 firebase 数据库中检索数据
【发布时间】:2018-12-05 11:57:54
【问题描述】:

我正在通过观看 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>

请帮忙,因为我在这里很绝望

【问题讨论】:

  • 补充一点——我必须使用所有东西的旧版本。来自 package.json:“angularfire2”:“4.0.0-rc.1”,“firebase”:“4.2.0”,
  • 好的 lort 角度看起来很糟糕。通过标准 javascript 与 firebase 交互非常简单。查看提供的角度代码,我猜您必须定义 db 是什么。您需要初始化 firebase,然后您必须提供对您想要获取/获取的内容的引用。
  • 在另一个组件中初始化。我只将 3 个相关组件粘贴到所需的输出中。

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


【解决方案1】:

因此,经过 2 周的调试和思考解决方法。 Angular 4.0.0 适用于 angularfire2 4.0.0-rc.1 和 firebase 4.2.0。问题出在我的 firebase 数据库结构上——我又嵌套了 categories 字段一次。耶稣。

【讨论】:

    猜你喜欢
    • 2017-10-28
    • 1970-01-01
    • 2020-09-07
    • 2018-07-09
    • 1970-01-01
    • 2017-01-11
    • 2018-09-04
    • 2018-11-10
    • 1970-01-01
    相关资源
    最近更新 更多