I am trying to return an new object with a name property. But it keeps giving me this error, the code pile without any problem though. I am using Angular 9 and AnfularFirestore to access the Firebase
this.db
.collection('availableExercises')
.snapshotChanges()
.pipe(
map(docArray => {
return docArray.map(doc => {
return {
id: doc.payload.doc.id,
name: doc.payload.doc.data().name,
duration: doc.payload.doc.data().duration,
calories: doc.payload.doc.data().calories
};
});
})
).subscribe((exercises: Exercise[]) => {
this.availableExercises = exercises;
this.exercisesChanged.next([...this.availableExercises]);
});
Here is the interface tha I am using for Exercise
export interface Exercise{
id: string;
name: string;
duration: number;
calories: number;
date?: Date;
state?: 'pleted' | 'cancelled' | null;
}
I am trying to return an new object with a name property. But it keeps giving me this error, the code pile without any problem though. I am using Angular 9 and AnfularFirestore to access the Firebase
this.db
.collection('availableExercises')
.snapshotChanges()
.pipe(
map(docArray => {
return docArray.map(doc => {
return {
id: doc.payload.doc.id,
name: doc.payload.doc.data().name,
duration: doc.payload.doc.data().duration,
calories: doc.payload.doc.data().calories
};
});
})
).subscribe((exercises: Exercise[]) => {
this.availableExercises = exercises;
this.exercisesChanged.next([...this.availableExercises]);
});
Here is the interface tha I am using for Exercise
export interface Exercise{
id: string;
name: string;
duration: number;
calories: number;
date?: Date;
state?: 'pleted' | 'cancelled' | null;
}
Share
Improve this question
edited May 13, 2020 at 16:03
user
7,6043 gold badges16 silver badges46 bronze badges
asked May 13, 2020 at 14:48
luccasluccas
831 gold badge2 silver badges4 bronze badges
3
-
What is that freestanding
map
function? Where do you get the error you've mentioned? – T.J. Crowder Commented May 13, 2020 at 14:54 -
map
insidepipe
is RxJS map operator – Alexander Staroselsky Commented May 13, 2020 at 14:59 -
How are you importing
Exercise
and what line exactly is it erroring onname: doc.payload.doc.data().name,
? – Alexander Staroselsky Commented May 13, 2020 at 15:00
1 Answer
Reset to default 14Most probably it's a TS Lint error. One workaround would be to use square brackets to access properties instead of the dot operator. Try the following
return docArray.map(doc => {
return ({
id: doc.payload.doc['id'],
name: doc.payload.doc.data()['name'],
duration: doc.payload.doc.data()['duration'],
calories: doc.payload.doc.data()['calories']
});
});
If you still get the error, try replacing the dot operators up the access chain.
Nevertheless, the generated JS should be valid regardless of this error.