Node.js 错误-TS2769:没有与此调用匹配的重载。-关于恩戈尼特

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

Task-view.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;

    })
  }
}

 

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

Task-view.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>
 

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

}

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

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

}

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- 时间：15491毫秒

错误：src/app/pages/task view/task view.component.ts:24:60-错误 TS2769:没有与此调用匹配的重载。过载1/5'（观察者？： NextObserver | ErrorObserver| CompletionObserver |未定义）：订阅'，提供了 以下错误。 类型为“（tasks:any[]）=>void”的参数不能分配给类型为“NextObserver | ErrorObserver”的参数| 完成观察者|未定义'。 类型“（任务：any[]）=>void”中缺少属性“complete”，但类型“CompletionObserver”中需要该属性。过载5个中的2个， '（下一个？：（（值：对象）=>void）|未定义，错误？：（（错误：任意） =>void）|未定义，完成？：（（）=>void）|未定义）：订阅'，出现以下错误。 类型为“（tasks:any[]）=>void”的参数不能分配给类型为“（value:Object）=>void”的参数。 参数“任务”和“值”的类型不兼容。 类型“Object”不可分配给类型“any[]”。 “对象”类型可分配给很少的其他类型。你的意思是用“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/5'（观察者？： NextObserver | ErrorObserver| CompletionObserver |未定义）：订阅'，提供了 以下错误。 类型为“（lists:any[]）=>void”的参数不能分配给类型为“NextObserver | ErrorObserver”的参数| 完成观察者|未定义'。 属性“complete”在类型（列表：any[]）=>void中丢失，但在类型“CompletionObserver”中是必需的。重载2/5， '（下一个？：（（值：对象）=>void）|未定义，错误？：（（错误：任意） =>void）|未定义，完成？：（（）=>void）|未定义）：订阅'，出现以下错误。 类型为“（lists:any[]）=>void”的参数不能分配给类型为“（value:Object）=>void”的参数。 参数“列表”和“值”的类型不兼容。 “Object”类型可分配给其他很少的类型。您是否打算改用“any”类型？ 类型“Object”缺少类型“any[]”中的以下属性：长度、弹出、推送、concat等

30 this.taskService.getLists（）.subscribe（（列表：any[]）=>{ ~~~~~~~~~~~~~~~~~~~

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

**Angular Live Development Server正在本地主机上侦听：4200，请在上打开浏览器http://localhost:4200/ **

---

基于您的服务和

ngOnInit

code。似乎是您在

this.taskService.getTasks

和

this.taskService.getlist

上指定的类型与服务的返回类型不相关

您的代码

.subscribe((tasks: 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

http://localhost:3000/lists
http://localhost:3000/lists//tasks

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

Task-view.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;

    })
  }
}

 

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

---

问题似乎指向您的服务，但希望确认。我们可以查看您的任务服务吗？这将帮助我们调试问题：）@KShewengger非常感谢您的帮助。我添加了我的Task-service.ts和web-request.service.ts.Hi Camila，没问题：）已经回答了下面的问题，期待您的回复：）您正在通过intellipaat构建MEAN stack的待办应用程序吗？这很有魅力！非常感谢。我刚刚开始学习该语言。我感谢您的帮助！！没问题，非常感谢：）