Angular 订阅 - 类型 'Subscription' 缺少来自类型 'ToDo[]' 的以下属性：length、pop、push、concat 和另外 26 个

Posted 2023-03-13

【中文标题】Angular 订阅 - 类型 \'Subscription\' 缺少来自类型 \'ToDo[]\' 的以下属性：length、pop、push、concat 和另外 26 个

【英文标题】：Angular Subcribe - Type 'Subscription' is missing the following properties from type 'ToDo[]': length, pop, push, concat, and 26 moreAngular 订阅 - 类型 'Subscription' 缺少来自类型 'ToDo[]' 的以下属性：length、pop、push、concat 和另外 26 个

【发布时间】：2019-12-28 13:41:03

【问题描述】：

代码返回错误 Type 'Subscription' is missing the following properties from type 'ToDo[]': length, pop, push, concat, and 26 more.

这通常是由于返回的 observable 没有被设置为数组。在我的情况下，返回类型是一个数组，但这个错误不断破坏我的应用程序。尽管以前工作过。

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

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

//在数据服务中

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

这应该没有错误，但是会出现此消息

src/app/todo/todo.component.ts:28:8 中的错误 - 错误 TS2740：“订阅”类型缺少“ToDo[]”类型的以下属性：长度、弹出、推送、连接和还有 26 个。

【参考方案1】：

那是因为您的方法 getUserTodo() 返回的是 Subscription 而不是 ToDo[]。 我认为您根本不需要usertodo。例如，您可以在ngOnInit() 中调用getUserTodo()，其余的都可以。当您拨打getUserTodo() 时，toDoList 将被填写。

或者您可以将getUserTodo() 的返回类型更改为Subscription。

【讨论】：

我明白你在说什么。我将其用作基于用户的过滤器。对我来说，解决办法是清除 toDoList 并用用户特定的 ToDo 对象填充它吗？我一直在将它从内存中的 api 转移到 .net 核心中

我认为您不需要这样做。当你想为另一个用户获取新数据时，你只需调用getUserTodo(id)，它就会更新toDoList。如果我正确理解您的问题。

NOT @igor_c，出现错误是因为 Ktall 将“any”类型的变量等同于 Todo[] 类型的变量。你可以避免错误只需写.subscribe((todo:Todo[]) => this.toDoList = todo; )或.subscribe((todo:any[]) => this.toDoList = todo as Todo[]; )

我认为这不会发生，因为 Typescript 可以推断出类型。由于apiGetUserTodo() 返回一个ToDo[] 的Observable，订阅中的todo 类型是正确的，而不是任何类型。

【参考方案2】：

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

【讨论】：

在这种情况下，您应该从方法中删除 return。但它不起作用，因为您将方法的结果分配给属性usertodo，该方法不返回任何内容

@igor_c 你能帮忙this

【参考方案3】：

出于某种原因 - 尽管存在错误，但代码仍按预期工作。数组中填充了 ToDo 对象。

【参考方案4】：

您可以使用任何变量来捕获订阅，然后将切片变量分配给您的类变量。

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