获取字段子集合Firestore

时间:2018-09-20 20:30:54

标签: angular typescript firebase google-cloud-firestore angularfire2

如何从集合中多个文档的子集合中获取数据?

例如,要访问集合的文档,我可以这样操作:

enter image description here

firebase.service.ts

getProyectos(){
  this.proyectos = this.afs.collection('proyectos', ref => ref
  .orderBy('categoria','asc')
  ).snapshotChanges().pipe(map(actions => {
    return actions.map(a => {
      const data = a.payload.doc.data() as Proyecto;
      const id = a.payload.doc.id;        
      return { id, ...data };
    });
  }));

  return this.proyectos
}

portafolio.component.ts

constructor( private fs: FirebaseService ) { }

ngOnInit() {
 this.proyectos = this.fs.getProyectos();
}

portafolio.component.html

<div *ngFor="let proyecto of proyectos | async"> 
   <h5>{{ proyecto.cliente }}</h5>
   <p>{{ proyecto.categoria}}</p>
</div>

但是,如果每个文档中都有一个名为files的子集合,我该如何访问它并重复例如该子集合的第一个文档的url

enter image description here

我尝试了以下操作,但是我重复了相同的图像,但我尚未实现文档ID是动态的。

firebase.service.ts

getImagenDestacada() {
  this.proyectos = this.afs.collection('proyectos').doc('saSXSG5NozMHiUngFkFp').collection('archivos', ref => ref
.orderBy('nombre','asc').limit(1)
).snapshotChanges().pipe(map(actions => {
  return actions.map(a => {
    const data = a.payload.doc.data() as Proyecto;
    const id = a.payload.doc.id;        
    return { id, ...data };
  });
}));

return this.proyectos
}

portafolio.component.ts

constructor( private fs: FirebaseService ) { }

ngOnInit() {
  this.proyectos = this.fs.getProyectos();
  this.archivos = this.fs.getImagenDestacada();
}

portafolio.component.html

<div *ngFor="let proyecto of proyectos | async"> 
  <div *ngFor="let archivo of archivos | async">
    <img src="{{ archivo.url }}">
    <h5>{{ proyecto.cliente }}</h5>
    <p>{{ proyecto.categoria}}</p>
  </div>
</div>

有什么想法吗?

0 个答案:

没有答案