Hello, my firebase structure is something like this:
firebase
contenedor1
caja1
caja2
contenedor2
caja1
contenedor3
My problem is how to get the containers with ngFor what I do is this
<ion-select [(ngModel)]="numPed">
<ion-option *ngFor="let item of pedidos" [value]="item.caja">{{ item }}</ion-option>
</ion-select>
I think you want to get the name of the document, you can follow this example of the documentation of angularfire2 .
export interface Shirt { name: string; price: number; }
export interface ShirtId extends Shirt { id: string; }
@Component({
selector: 'app-root',
template: '
<ul>
<li *ngFor="let shirt of shirts | async">
{{ shirt.name }} is {{ shirt.price }}
</li>
</ul>
'
})
export class AppComponent {
private shirtCollection: AngularFirestoreCollection<Shirt>;
shirts: Observable<ShirtId[]>;
constructor(private readonly afs: AngularFirestore) {
this.shirtCollection = afs.collection<Shirt>('shirts');
// .snapshotChanges() returns a DocumentChangeAction[], which contains
// a lot of information about "what happened" with each change. If you want to
// get the data and the id use the map operator.
this.shirts = this.shirtCollection.snapshotChanges().map(actions => {
return actions.map(a => {
const data = a.payload.doc.data() as Shirt;
const id = a.payload.doc.id;
return { id, ...data };
});
});
}
}
Where you create two typescript interfaces, one that emulates the json of your document and another that has a property of type string called id.
You create a firebase collection of type and an observable array of Shirt.
Inside the map you fill the observable (array of Shirt) and add the property id . This way you could use it within an ngfor.
<li *ngFor="let shirt of shirts | async">
{{ shirt.id }} is {{ shirt.price }}
</li>