I'm trying to access the data from the firestore database in angular.
This is my component:
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import {AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument} from 'angularfire2/firestore';
interface Mission {
cliente: string;
luogo: string;
materiale: string;
nCassoni: number;
nota: string;
operatore: string;
}
@Component({
selector: 'app-check-mission',
templateUrl: './check-mission.component.html',
styleUrls: ['./check-mission.component.css']
})
export class CheckMissionComponent{
missionsCol: AngularFirestoreCollection<Mission>;
missions: any;
constructor(private db: AngularFirestore) {
}
ngOnInit(){
this.missionsCol = this.db.collection('mission');
this.missionsCol.valueChanges().subscribe((_missions: any) => {
this.missions = _missions;
console.log(this.missions);
}
}
This is my html:
<ul *ngFor="let mission of missions | async">
<li>
{{ mission.cliente }}
</li>
</ul>
In the firestore I have 6 documents under mission
and infact in the html page I see six points, but except that everithing is blank!
What I'm doing wrong?
UPDATE
--I've updated the code and now I can log the results in the console, but I can't see the deata inside the html. The console is giving me this error nvalidPipeArgument: '[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]' for pipe 'AsyncPipe' at invalidPipeArgumentError ..
Try this:
this.missionsCol.valueChanges().subscribe((_missions: any) => {
this.missions = _missions;
})
A note this will tigger everytime something in the missions json is changed.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.