【问题标题】:Angular 6 firebase get list from cloud firestoreAngular 6 firebase 从云 Firestore 获取列表
【发布时间】:2018-08-29 12:01:12
【问题描述】:

我想知道如何从 Cloud Firestore 获取列表。

我上传这样的列表:

export interface Data {
  name: string;
  address: string;
  address2: string;
  pscode: string;
  ccode: string;
  name2: string;
}

constructor(private afs: AngularFirestore){
    this.notesCollection = this.afs.collection(`imones`, (ref) => ref.orderBy('time', 'desc').limit(5));
}

  notesCollection: AngularFirestoreCollection<Data>;

//creating item in list (imones)

createItem(){
  this.notesCollection.add(this.busines);
}

现在的问题是如何从那里获取所有列表项?

这是我的尝试:

constructor(private afs: AngularFirestore){
  this.items = this.notesCollection.valueChanges();
}
  items: Observable<Data[]>;

HTML:

 <p *ngFor="let item of items">{{item.name}}</p>

错误:

错误错误:找不到不同的支持对象“[object Object]” '对象'类型。 NgFor 仅支持绑定到 Iterables,例如 数组。

又报错了:

【问题讨论】:

    标签: angular firebase google-cloud-firestore angularfire2


    【解决方案1】:

    你正在尝试迭代一个 observable。 *ngFor 循环允许您仅对可迭代对象(数组、集合)进行迭代

    你有两个选择:

    1. 使用内置的async pipe 来迭代可观察对象。 例如:

      &lt;p *ngFor="let item of items | async"&gt;{{item.name}}&lt;/p&gt;

    2. 订阅 observable 并使用其最新结果更新变量(在您的情况下,可观察结果是一个数组):

      this.notesCollection.valueChanges()
                          .subscribe((items) => this.items = items);
      

    【讨论】:

    • 您仍在将this.items 设置为可观察对象,请删除第一个分配。分配应该在订阅内部,而不是外部。
    • 请举例?
    • this.notesCollection.valueChanges().subscribe((items) => this.items = items); ,在 this.items 上仍然出现同样的错误
    • 缺少属性 isScalar
    • 显示你的 items 变量声明
    猜你喜欢
    • 2019-02-04
    • 1970-01-01
    • 1970-01-01
    • 2019-05-10
    • 2020-01-27
    • 2018-06-30
    • 1970-01-01
    • 1970-01-01
    • 2018-11-06
    相关资源
    最近更新 更多