Angular / Angularfire2找不到不同的支持对象答案

【问题标题】：Angular / Angularfire2 Cannot find a differ supporting objectAngular / Angularfire2找不到不同的支持对象
【发布时间】：2018-06-09 12:22:47
【问题描述】：

我在将 firebase db.list() 返回分配给变量时遇到问题

组件：

import { Component, OnInit } from '@angular/core';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
//import { FirebaseListObservable } from 'angularfire2/database-deprecated';

@Component({
  selector: 'app-cadastrar-pessoa-lista',
  templateUrl: './cadastrar-pessoa-lista.component.html',
  styleUrls: ['./cadastrar-pessoa-lista.component.css']
})
export class CadastrarPessoaListaComponent implements OnInit {

  pessoas: AngularFireList<any[]>;

  constructor(db: AngularFireDatabase) {
    **console.log('antes...: ' + typeof this.pessoas); // == undefined**
    this.pessoas = db.list('pessoas');
    **console.log('antes...: ' + typeof this.pessoas); // == object**
  }

  ngOnInit() {

  }

}

ng serve 可以，但是组件不行，devtools 中的错误是：

AngularFireList 找不到不同的支持对象 '[object 对象]' 类型为“对象”。 NgFor 只支持绑定到 Iterables 比如数组

所以，documentation list() deals with a Generic type，只要我明白：

list<T>(pathOrRef: PathReference, queryFn?: QueryFn): AngularFireList<T> {
    const ref = getRef(this.app, pathOrRef);
    let query: DatabaseQuery = ref;
    if(queryFn) {
      query = queryFn(ref);
    }
    return createListReference<T>(query);
  }

这是怎么回事，我怎样才能做到这一点？

【问题讨论】：

标签： angular rxjs angularfire2

【解决方案1】：

db.list() 检索 Observable 值（异步） - manual。所以在获取pessoas值之前需要subscribe()。

constructor(db: AngularFireDatabase) { }

ngOnInit() {
    let pessoasObservable = db.list('pessoas').subscribe(pessoas => {
        this.pessoas = pessoas;
    });
}

最佳实践告诉我们使用onInit() 而不是constructor() - link

【讨论】：

Pessoas 中的“Pessoas”是什么？我没有佩索斯类型。我也无法转换为数组或 ArrayFireList
对不起，我想你有一个 Pessoa 的类/接口。如果你不使用 pessoas : Pessoas 这样的类型，直接删除即可。
我需要一个 Observable。这对我也有帮助：开发人员通常需要使用数组来显示数据。但是，firebase 不会以数组形式存储任何数据。相反，它使用类似 JSON 的结构。话虽这么说，为了让每个人都更容易从firebase中检索数据作为数组，angularfire为您提供$firebaseArray（），它本质上转换来自某个位置的数据并在数组中返回相同的数据（只读伪数组）。

【解决方案2】：

我认为问题的原因是您将 dbReference 返回到模板。尝试进行此修改

  pessoasRef: AngularFireList<any[]>;
  pessoas: Observable<any[]>;

  constructor(db: AngularFireDatabase) {

  this.pessoasRef = db.list('pessoas');
  this.pessoas = this.pessoasRef.valueChanges();

【讨论】：