错误 - TS2769：没有与此调用匹配的重载。 - 在 ngOnInit 上

Question

我正在尝试将 API 连接到前端。以下是我的代码：

任务视图.component.ts

import { Component, OnInit } from '@angular/core';
import { TaskService } from 'src/app/task.service';
import { ActivatedRoute, Params } from '@angular/router';

@Component({
  selector: 'app-task-view',
  templateUrl: './task-view.component.html',
  styleUrls: ['./task-view.component.scss']
})
export class TaskViewComponent implements OnInit {

  lists!: any[];
  tasks!: any[];

  constructor(private taskService: TaskService, private route: ActivatedRoute) { }
  
ngOnInit() {
      this.route.params.subscribe((params: Params) => {
       // console.log(params);
        this.taskService.getTasks(params.listId).subscribe((tasks: any[] ) => {
          this.tasks =tasks;
        })

      })

    this.taskService.getLists().subscribe((lists: any[]) => {
    this.lists=lists;

    })
  }
}

 

任务视图.component.html

<div class="centered-content">
  <div class="task-manager-container">

    <div class="sidebar has-background-white">
      <h1 class="title has-text-primary">
        Lists
      </h1>

      <div class="list-menu">
        <a class="list-menu-item" is-active>
          <p> list #1</p>
        </a>
        <a class="list-menu-item" *ngFor="let list of lists" [routerLink]="['/lists',list._id]"
          routerLinkActive="is-active">
          <p> {{list.title}}</p>
        </a>
      </div>


      <button class="button is-primary has-text-white" routerLink="/new-list">+ New List</button>

    </div>

    <div class="task-list-container has-background-light">
      <h1 class="title has-text-primary">
        Tasks
      </h1>

      <!-- Task Elements -->
      <div class="task" class="task" *ngfor="let task of tasks">
        <p>{{task.title}}</p>
        </a>
      </div>


    </div>
  </div>
 

在我从教程中输入 ngOnInit 后，我​​的程序崩溃了：

ngOnInit() {
      this.route.params.subscribe((params: Params) => {
       // console.log(params);
        this.taskService.getTasks(params.listId).subscribe((tasks: any[] ) => {
          this.tasks =tasks;
        })

      })

    this.taskService.getLists().subscribe((lists: any[]) => {
    this.lists=lists;

    })
  }
}

task.service.ts

import { Injectable } from '@angular/core';
import { WebRequestService } from './web-request.service';
//import { Task } from './models/task.model';

@Injectable({
  providedIn: 'root'
})
export class TaskService {

  constructor(private webReqService: WebRequestService) { }


  getLists() {
    return this.webReqService.get('lists');
  }

  createList(title: string) {
    // We want to send a web request to create a list
    return this.webReqService.post('lists', { title });
  }

  getTasks(listId: string) {
    return this.webReqService.get(`lists/${listId}/tasks`);
  }

}

web-request.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class WebRequestService {

  readonly ROOT_URL;

  constructor(private http: HttpClient) {
    this.ROOT_URL = 'http://localhost:3000';
  }

  get(uri: string) {
    return this.http.get(`${this.ROOT_URL}/${uri}`);
  }

  post(uri: string, payload: Object) {
    return this.http.post(`${this.ROOT_URL}/${uri}`, payload);
  }

  patch(uri: string, payload: Object) {
    return this.http.patch(`${this.ROOT_URL}/${uri}`, payload);
  }

  delete(uri: string) {
    return this.http.delete(`${this.ROOT_URL}/${uri}`);
  }
}

这是我得到的错误。有什么想法吗？

构建于：2020-12-01T03:14:29.853Z - 哈希：3639e8cffc68651ef24b - 时间：15491ms

错误：src/app/pages/task-view/task-view.component.ts:24:60 - 错误 TS2769：没有重载匹配此调用。重载 1 of 5, '(观察者?: 下一个观察者 |错误观察者 | 完成观察者 | undefined): Subscription'，给出了 以下错误。 '(tasks: any[]) => void' 类型的参数不可分配给 'NextObserver | 类型的参数错误观察者 | 完成观察者 |不明确的'。 '(tasks: any[]) => void' 类型中缺少属性 'complete'，但在 'CompletionObserver' 类型中是必需的。重载 2 of 5, '(next?: ((value: Object) => void) | undefined, error?: ((error: any) => 无效）|未定义，完整？： (() => void) | undefined): Subscription'，给出了以下错误。 '(tasks: any[]) => void' 类型的参数不可分配给'(value: Object) => void' 类型的参数。 参数“tasks”和“value”的类型不兼容。 类型“对象”不可分配给类型“任何 []”。 “对象”类型可分配给极少数其他类型。您的意思是改用 'any' 类型吗？

24 this.taskService.getTasks(params.listId).subscribe((任务： 任何[] ) => { ~~~~~~~~~~~~~~~~~~~~

node_modules/rxjs/internal/types.d.ts:64:5 64完成：（）=>无效； ~~~~~~~~ 这里声明了“完整”。 src/app/pages/task-view/task-view.component.ts:30:43 - 错误 TS2769： 没有重载匹配此调用。重载 1 of 5, '(观察者?: 下一个观察者 |错误观察者 | 完成观察者 | undefined): Subscription'，给出了 以下错误。 '(lists: any[]) => void' 类型的参数不可分配给 'NextObserver | 类型的参数错误观察者 | 完成观察者 |不明确的'。 '(lists: any[]) => void' 类型中缺少属性 'complete'，但在 'CompletionObserver' 类型中是必需的。重载 2 of 5, '(next?: ((value: Object) => void) | undefined, error?: ((error: any) => 无效）|未定义，完整？： (() => void) | undefined): Subscription'，给出了以下错误。 '(lists: any[]) => void' 类型的参数不能分配给 '(value: Object) => void' 类型的参数。 参数“列表”和“值”的类型不兼容。 “对象”类型可分配给极少数其他类型。您的意思是改用“任何”类型吗？ “Object”类型缺少“any[]”类型的以下属性：length、pop、push、concat 等 26 个。

30 this.taskService.getLists().subscribe((lists: any[]) => { ~~~~~~~~~~~~~~~~~~~

node_modules/rxjs/internal/types.d.ts:64:5 64完成：（）=>无效； ~~~~~~~~ 这里声明了“完成”。

** Angular Live Development Server 正在监听 localhost:4200，在 http://localhost:4200/ 上打开浏览器 **

Answer 1

如果您不知道确切的对象返回类型，请在对象声明和 API 调用响应中使用 any。您的代码应如下所示

任务视图.component.ts

import { Component, OnInit } from '@angular/core';
import { TaskService } from 'src/app/task.service';
import { ActivatedRoute, Params } from '@angular/router';

@Component({
  selector: 'app-task-view',
  templateUrl: './task-view.component.html',
  styleUrls: ['./task-view.component.scss']
})
export class TaskViewComponent implements OnInit {

  lists!: any;
  tasks!: any;

  constructor(private taskService: TaskService, private route: ActivatedRoute) { }
  
ngOnInit() {
      this.route.params.subscribe((params: Params) => {
       // console.log(params);
        this.taskService.getTasks(params.listId).subscribe((tasks: any ) => {
          this.tasks =tasks;
        })

      })

    this.taskService.getLists().subscribe((lists: any) => {
    this.lists=lists;
    })
  }
}

Answer 2

基于您的服务和ngOnInit 代码。似乎您在 this.taskService.getTasks 和 this.taskService.getLists 上指定的类型与您的服务的返回类型无关

您的代码

.subscribe((tasks: any[] ) => { ... })

将其更改为any，不带[]

.subscribe((tasks: any ) => {
   console.log(tasks);                   // Check the tasks if it's actually an array response 
                                         // or is actually an object where your array resides
 
})

---

出于调试目的，最好检查您正在访问的这些路由的响应是什么以及它们是否有响应并确认它是否为数组类型

http://localhost:3000/lists
http://localhost:3000/lists/<LIST_ID>/tasks