I am getting the following error in my component file, when I am trying to store the firebase fetched events in the parameter. The parameters are fetched properly but I am not able store them. What cahnges should I make to run the code?:-
Type 'import("c:/Users/hp/Desktop/Angular/gametask1/src/app/models/Event").Event[]' is not assignable to type 'Event[]'.
Type 'Event' is missing the following properties from type 'Event': bubbles, cancelBubble, cancelable, composed, and 18 more.
Event.ts:-
export interface Event {
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';
@Injectable({
providedIn: 'root'
})
export class EventsService {
eventsCollection : AngularFirestoreCollection<Event>;
events: Observable<Event[]>;
constructor(public afs: AngularFirestore) {
this.events = this.afs.collection<Event>('Events').valueChanges();
}
getEvents()
{
return this.events;
}
}
events.component.ts:-
import { Component, OnInit } from '@angular/core';
import { EventsService } from 'src/app/services/events.service';
@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;
});
}
}
You did not import the right Event
interface into your component.
Add this line in your events.component.ts
import { Event } from '../models/Event';
It compiles because Event is also a global interface, but it's not the one you wanted to use.
Use different names for your interfaces if you dont want those 'conflicts'.