2
votes

Abonnement angulaire - Il manque les propriétés suivantes du type 'ToDo []' pour le type 'Subscription': length, pop, push, concat, et 26 autres

Le code renvoie l'erreur de type 'Subscription' il manque les propriétés suivantes du type 'ToDo []': length, pop, push, concat, et 26 autres.

Cela est généralement dû au fait que l'observable de retour n'est pas défini comme un tableau. Dans mon cas, le type de retour est un tableau mais cette erreur continue de casser mon application. Bien que cela ait fonctionné précédemment.

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

// DANS LE SERVICE DE DONNÉES

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

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

Cela devrait être sans erreur, mais ce message apparaît

ERREUR dans src / app / todo / todo.component.ts: 28: 8 - erreur TS2740: il manque les propriétés suivantes du type 'ToDo []' du type 'Abonnement': length, pop, push, concat et 26 de plus.

angular http https subscribe

0 commentaires

4 Réponses :

1
votes

C'est parce que votre méthode getUserTodo () renvoie un Abonnement et non un ToDo [] . Je pense que vous n'avez pas du tout besoin du usertodo . Vous pouvez appeler le getUserTodo () dans le ngOnInit () par exemple et le reste est ok. toDoList sera rempli lorsque vous appelez getUserTodo () .

Ou vous pouvez changer le type de retour de getUserTodo () en Subscription .

4 commentaires

Je comprends ce que vous dites. J'utilise cela comme un filtre basé sur l'utilisateur. Est-ce que la solution pour moi serait d'effacer la toDoList et de la remplir avec des objets ToDo spécifiques à l'utilisateur? Je l'ai déplacé d'une API en mémoire vers une API principale .net

Je pense que tu n'as pas besoin de faire ça. Lorsque vous souhaitez obtenir de nouvelles données pour un autre utilisateur, il vous suffit d'appeler getUserTodo (id) et il mettra à jour toDoList . Si je comprends bien votre question.

PAS @igor_c, L'erreur vient du fait que Ktall égale une variable de type "any" à une variable de type Todo []. vous pouvez éviter l'erreur simplement écrire .subscribe ((todo: Todo []) => {this.toDoList = todo;}) ou .subscribe ((todo: any []) = > {this.toDoList = todo as Todo [];})

Je ne pense pas que cela se produise, car Typescript peut en déduire le type. Comme apiGetUserTodo () renvoie un observable de ToDo [] , le type todo dans l'abonnement est correct, pas n'importe lequel.

0
votes

Pour une raison quelconque - Le code fonctionne comme prévu malgré l'erreur. Le tableau est rempli d'objets ToDo.

0 commentaires

1
votes

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(
            tap(data => {
                console.log('USER ' + JSON.stringify(data));
                return data;
            })
        );
    }

1 commentaires

Dans ce cas, vous devez supprimer return de la méthode. Mais cela ne fonctionnera pas car vous affectez à la propriété usertodo le résultat de la méthode qui ne renvoie rien

0
votes

vous pouvez utiliser une variable any pour attraper l'abonnement puis affecter la variable découpée à votre variable de classe.

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

0 commentaires