Reputation: 1163
import { Injectable } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/database';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class FirebaseService {
listings: Observable<any[]>;
constructor(private db: AngularFireDatabase) { }
getListings(){
this.listings = this.db.list('/listings') as Observable<Listing[]>
return this.listings;
}
}
interface Listing{
$key?:string;
title?:string;
type?:string;
image?:string;
city?:string;
owner?:string;
bedrooms?:string;
}
I'm trying to retrieve data as a list from Firebase using angularfirer2. But in this.listings = this.db.list('/listings') as Observable<Listing[]>
I'm getting a error saying
Conversion of type 'AngularFireList<{}>' to type 'Observable' may be a mistake because neither type sufficiently overlaps with the other.
Can anyone help me with this matter.
Upvotes: 0
Views: 83
Reputation: 44
You Can Create a separate function of getListing In .service file like this.
getEmployees() {
return this.firestore.collection('employees').snapshotChanges();
}
And then call the getEmployees Function in component's .ts file
list: Employee[];
ngOnInit() {
this.service.getEmployees().subscribe(actionArray => {
this.list = actionArray.map(item => {
return {
id: item.payload.doc.id,
...item.payload.doc.data()
} as Employee;
})
});
}
and then you can get data in HTML file by for loop of List like below.
<tbody>
<tr *ngFor="let emp of list">
<td >{{emp.empCode}} - {{emp.fullName}}</td>
<td >{{emp.position}}</td>
<td >{{emp.mobile}}</td>
</tr>
</tbody>
Upvotes: 1