I am getting the following error in my services file, suggest the changes in the code:-
Property 'map' does not exist on type 'Observable[]>'.
My Event.ts contains an interface with 5 declared parameters which are id: string; code: string; name: string; password: string; pollCat: string;
events.service.ts:-
import { Injectable } from '@angular/core';
import { AngularFirestore , AngularFirestoreCollection, AngularFirestoreDocument} from 'angularfire2/firestore';
import { Event } from '../models/Event';
import { Observable } from 'rxjs';
import {map} from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class EventsService {
eventsCollection : AngularFirestoreCollection<Event>;
events: Observable<Event[]>;
constructor(public afs: AngularFirestore) {
this.events = this.afs.collection<Event>('Events').snapshotChanges().map(changes => {
return changes.map(a => {
const data = a.payload.doc.data() as Event;
data.id = a.payload.doc.id;
return data;
})
});
}
getEvents()
{
return this.events;
}
}
events.component.ts:-
import { Component, OnInit } from '@angular/core';
import { EventsService } from 'src/app/services/events.service';
import { Event } from '../../models/Event';
@Component({
selector: 'app-events',
templateUrl: './events.component.html',
styleUrls: ['./events.component.css']
})
export class EventsComponent implements OnInit {
events: Event[];
constructor(public eventsService: EventsService) { }
ngOnInit() {
this.eventsService.getEvents().subscribe(events => {
this.events = events;
console.log(events);
});
}
}
We cannot use RXJS operators like this, we need to enclose them inside the pipe method. Please make the following changes.
constructor(public afs: AngularFirestore) {
this.events = this.afs.collection<Event>('Events').snapshotChanges().pipe(
map(changes => {
return changes.map(a => {
const data = a.payload.doc.data() as Event;
data.id = a.payload.doc.id;
return data;
})
}));
}