How to use the map operator in rxjs within an angular 7 app?

Question

My code compiles and everything is working fine, but my IDE (Visual Studio Code) shows the following error message and I'm unable to deploy my app (with ng build --prod):

ERROR in src/app/training/training.service.ts(61,46): error TS2339: Property 'name' does not exist on type '{}'. src/app/training/training.service.ts(62,50): error TS2339: Property 'duration' does not exist on type '{}'. src/app/training/training.service.ts(63,50): error TS2339: Property 'calories' does not exist on type '{}'.

I import the map operator like this:

import { map, take } from 'rxjs/operators';

and use it like this:

...
    .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
          };
        });
      })
    )
...

My interface looks like:

export interface Exercise {
id: string;
name: string;
duration: number;
calories: number;
date?: Date;
state?: 'completed' | 'cancelled' | null;

}

What am I doing wrong?

It is a subscription to a firebase database/collection and fetches the data from there. I added the used interface to my question. I have the feeling that it is due to the second nested map function. Because it is not the rxjs operator, but the normal Javascript method.. — Codehan25
– Codehan25, Commented Feb 13, 2019 at 23:54

Haijin · Accepted Answer · 2019-02-14 00:12:51Z

1

To fool Typescript, you might do this:

doc => {

    let result: any = doc.payload.doc.data();
          return {
            id: doc.payload.doc.id,
            name: result.name,
            duration: result.duration,
            calories: result.calories
          };

answered Feb 14, 2019 at 0:12

Haijin

2,7163 gold badges20 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Codehan25 Over a year ago

That's how it works, but why do I get an error message with my version? The import is correct and I also use the pipe syntax. Does this really only have to do with my IDE?

Haijin Over a year ago

I think it has nothing to do with your import, syntax, or IDE. The data() function might have a wrong signature, or do not signature defined in Typescript. Typescript then would not allow you to use data().id. Redefine it as any let typescript to skip type check here.

Collectives™ on Stack Overflow

How to use the map operator in rxjs within an angular 7 app?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related