Question

我是firebase和angular的新手，一步到位，试图学习我在firebase中创建的数据，现在想要进入角度5.但它不起作用。

Firebase数据结构：

category.service.ts：

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class CategoryService {

  constructor(private db: AngularFireDatabase) { }

  getCategories(){
    return this.db.list('/categories').valueChanges();
  }

}

产品-form.component.ts

import { CategoryService } from './../../category.service';
import { Component, OnInit } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'app-product-form',
  templateUrl: './product-form.component.html',
  styleUrls: ['./product-form.component.css']
})
export class ProductFormComponent implements OnInit {
  categories$; // Observable

  constructor(private categoryService: CategoryService) {
  }

  ngOnInit() {
    this.categories$ = this.categoryService.getCategories();
    console.log(this.categories$);
  }

}

产品form.component.html

<select class="form-control" name="" id="category">
        <option value=""></option>
        <option  *ngFor="let c of categories$ | async" [value]="c.$key">
          {{c.name}}
        </option>
    </select>

我得到的控制台出错：

请告诉我我的代码有什么问题。

Answer 1

嘿，你在使用rxjs吗？也许考虑在这个线程中我已经回答了类似的问题。 RXJS-version problem

在大多数情况下，问题是你的rxjs版本不是版本6.另外请考虑你是否使用的版本少于6，你试着升级看看我的答案。迁移到版本6时，您应该遵循迁移指南。

希望这能解决您的问题。

Answer 2

您应该尝试使用for in循环。订阅http observable，然后使用for in循环将其填充到业务逻辑所需的数组或数据结构中。

然后在HTML中使用这个新的数据结构。如果您选择一个数组，那么for循环肯定会在您的HTML文件中有效。

希望有所帮助。祝你好运!!

以角度5从firebase获取数据

2 个答案: