Angular Subcribe - Type 'Subscription' is missing the following properties from type 'ToDo[]': length, pop, push, concat, and 26 more

Question

The code returns the error Type 'Subscription' is missing the following properties from type 'ToDo[]': length, pop, push, concat, and 26 more.

This is usually caused by the return observable not being set as an array. In my case the return type is an array but this error keeps breaking my app. Despite working previously.

toDoList: ToDo[];   
this.usertodo = this.getUserTodo(this._userId);

getUserTodo(id: number): ToDo[] {
    return this.DataService.apiGetUserTodo(id).subscribe(
        todo => {
            this.toDoList = todo;
        }
    );
}

// IN DATA SERVICE

apiGetUserTodo(id: number): Observable<ToDo[]> {
    const url = `${this.APIurl}/users/${id}/todos`;
    return this.http.get<ToDo[]>(url).pipe(
      tap(data => console.log('USER ' + JSON.stringify(data)))
    );
}

This should be error free however this message comes up

ERROR in src/app/todo/todo.component.ts:28:8 - error TS2740: Type 'Subscription' is missing the following properties from type 'ToDo[]': length, pop, push, concat, and 26 more.

score 2 · Answer 1 · answered Aug 23 '19 at 08:55

2

That's because your method getUserTodo() returns a Subscription not a ToDo[]. I think you don't need the usertodo at all. You can call the getUserTodo() in the ngOnInit() for example and the rest is ok. toDoList will be filled when you call getUserTodo().

Or you can change the return type of the getUserTodo() to Subscription.

answered Aug 23 '19 at 08:55

igor_c

1,200
1
8
20

I get what you're are saying. I'm using this as a filter based on the user. Would the way around for me would be to clear the toDoList and fill it with user specific ToDo objects? I've been moving it from an in memory api to a .net core one – Ktall32 Aug 23 '19 at 09:19
I think you don't need to do that. When you want to get new data for another user you just call `getUserTodo(id)` and it will update `toDoList`. If I understand your question correctly. – igor_c Aug 23 '19 at 09:24
NOT @igor_c, The error comes because Ktall equal a variable of type "any" to a variable of type Todo[]. you can avoid the error simply write `.subscribe((todo:Todo[]) => { this.toDoList = todo; })` or `.subscribe((todo:any[]) => { this.toDoList = todo as Todo[]; })` – Eliseo Aug 23 '19 at 12:16
I don't think that this is happening, as Typescript can infer the type. As `apiGetUserTodo()` returns an Observable of `ToDo[]` the `todo` type in the subscribe is correct, not any. – igor_c Aug 23 '19 at 12:21

Rahul Rathore · Answer 2 · 2023-03-24T05:39:06.030

1

Please try using below code 

export class ToDo {
    id: number;
    title: string;
    complete: boolean;
}

ngOnInit() {
  this.getUserTodo(1);
}

// please add void return type instead of ToDo[], because you have already subscribe in the below method

getUserTodo(id: number) {
    this.DataService.apiGetUserTodo(id).subscribe(todo => {
      this.toDoList = todo;
      this.usertodo = todo;
   });
}


    apiGetUserTodo(id: number): Observable<ToDo[]> {
        const url = `api/users/${id}/todos`;
        return this.http.get<ToDo[]>(url)
        .pipe(
            map(data => {
                console.log('USER ' + JSON.stringify(data));
                return data;
            })
        );
    }

edited Mar 24 '23 at 05:39

answered Aug 23 '19 at 10:08

Rahul Rathore

126
2
4

In that case you should remove `return` from the method. But it won't work as you're assigning to the property `usertodo` the result of the method which returns nothing – igor_c Aug 23 '19 at 10:34
@igor_c are you able to help with [this](https://stackoverflow.com/questions/68169715/mat-autocomplete-error-when-using-formarray) – Flash Jun 29 '21 at 12:40

score 0 · Answer 3 · answered Aug 23 '19 at 09:17

0

For some reason - The code works as expected despite the error being present. The array is filled with ToDo objects.

answered Aug 23 '19 at 09:17

Ktall32

29
2
7

score 0 · Answer 4 · answered Oct 07 '19 at 05:46

you can use an any variable to catch the subscription then assign the sliced variable to your class variable.

toDoList: ToDo[];
toDo: any;

this.usertodo = this.getUserTodo(this._userId);

getUserTodo(id: number): ToDo[] {
    return this.DataService.apiGetUserTodo(id).subscribe(
        todo => {
            this.toDo = todo;
            this.toDoList = this.toDo.slice();
        }
    );
}

Angular Subcribe - Type 'Subscription' is missing the following properties from type 'ToDo[]': length, pop, push, concat, and 26 more

4 Answers4