代码之家 › 专栏 › 技术社区 › Angulandy2

Angular 6 firebase从cloud firestore获取列表

angularfire2 google-cloud-firestore firebase angular

-1

Angulandy2 · 技术社区 · 8 年前

我上传列表如下:

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”。NgFor只支持绑定到Iterables,例如数组。

再次出错:

1 回复 | 直到 8 年前

1

3

TheUnreal 8 年前

这个 *ngFor 循环只允许在iterables(数组、集合)上迭代

您有两种选择:

async pipe 为了迭代一个可观察到的。例如:

<p *ngFor="let item of items | async">{{item.name}}</p>
订阅observable并用它的最新结果更新一个变量(在您的例子中,observable结果是一个数组):
```
this.notesCollection.valueChanges()
                    .subscribe((items) => this.items = items);
```