angular - 错误 TS2322：类型“列表 | undefined' 不可分配给类型 'any[] (Iterable& 任何[]) | (任何[] & 可迭代) | 空 | 不明确的'

Question

我正在关注 youtube 的角度教程，我发现应用于any变量是不好的做法，所以我将其更改为分配给我的模型List和Task模型，它似乎非常适合

错误信息

Error: src/app/pages/task-view/task-view.component.ts:27:60 - error TS2769: No overload matches this call. 
      Overload 1 of 5, '(observer?: NextObserver<Object> | ErrorObserver<Object> | CompletionObserver<Object> | undefined): Subscription', gave the following error.
        Argument of type '(tasks: Task[]) => void' is not assignable to parameter of type 'NextObserver<Object> | ErrorObserver<Object> | CompletionObserver<Object> | undefined'.
          Property 'complete' is missing in type '(tasks: Task[]) => void' but required in type 'CompletionObserver<Object>'.
      Overload 2 of 5, '(next?: ((value: Object) => void) | undefined, error?: ((error: any) => void) | undefined, complete?: (() => void) | undefined): Subscription', gave the following error.
        Argument of type '(tasks: Task[]) => void' is not assignable to parameter of type '(value: Object) => void'.
          Types of parameters 'tasks' and 'value' are incompatible.
            The 'Object' type is assignable to very few other types. Did you mean to use the 'any' type instead?
              Type 'Object' is missing the following properties from type 'Task[]': length, pop, push, concat, 
and 26 more.
    
    27         this.taskService.getTasks(params.listId).subscribe((tasks: Task[]) => {
                                                                  ~~~~~~~~~~~~~~~~~~~~
    
      node_modules/rxjs/internal/types.d.ts:64:5
        64     complete: () => void;
               ~~~~~~~~
        'complete' is declared here.
    src/app/pages/task-view/task-view.component.ts:34:42 - error TS2769: No overload matches this call.        
      Overload 1 of 5, '(observer?: NextObserver<Object> | ErrorObserver<Object> | CompletionObserver<Object> | undefined): Subscription', gave the following error.
        Argument of type '(lists: List[]) => void' is not assignable to parameter of type 'NextObserver<Object> | ErrorObserver<Object> | CompletionObserver<Object> | undefined'.
          Property 'complete' is missing in type '(lists: List[]) => void' but required in type 'CompletionObserver<Object>'.
      Overload 2 of 5, '(next?: ((value: Object) => void) | undefined, error?: ((error: any) => void) | undefined, complete?: (() => void) | undefined): Subscription', gave the following error.
        Argument of type '(lists: List[]) => void' is not assignable to parameter of type '(value: Object) => void'.
          Types of parameters 'lists' and 'value' are incompatible.
            The 'Object' type is assignable to very few other types. Did you mean to use the 'any' type instead?
              Type 'Object' is missing the following properties from type 'List[]': length, pop, push, concat, 
and 26 more.
    
    34     this.taskService.getList().subscribe((lists: List[]) => {
                                                ~~~~~~~~~~~~~~~~~~~~
    
      node_modules/rxjs/internal/types.d.ts:64:5
        64     complete: () => void;
        'complete' is declared here.

任务视图.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';
import { TaskService } from 'src/app/task.service';
import { MatDialog } from '@angular/material/dialog';
import { Task } from 'src/app/models/task.model';
import { List } from 'src/app/models/list.model';




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

  lists?: List[];
  tasks?: Task[];

  constructor(private taskService: TaskService, private route: ActivatedRoute, private dialog: MatDialog) { }

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

    )

    this.taskService.getList().subscribe((lists:List[]) => {
      console.log(lists);
      this.lists = lists;
    })
  }

  onTaskClick(task: Task) {
    // We want to set the task to completed
    this.taskService.complete(task).subscribe(() => {
      console.log("Completed successfully");
    })
  }


  


}

任务-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 *ngFor = "let list of lists" class="list-menu-item has-text-primary" [routerLink]= "['/lists', list._id]" routerLinkActive= "is-active">
                    <p>{{list.title}}</p>
                </a>
            </div>

            

            <button mat-raised-button class="button is-medium is-primary has-text-light " routerLink = "/new-list">
                <mat-icon>add</mat-icon> New List
            </button>
        </div>

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

            <!-- Task Elements -->
            <div *ngFor = "let task of tasks" class="task-list has-text-primary" (click) = onTaskClick(task)>
                <p> {{ task.title }} </p>
            </div>

            <button class="circle-add-button button is is-primary" routerLink = "./new-task">
                <mat-icon>add</mat-icon>
            </button>
        </div> 


    </div>
</div>

任务服务.ts

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

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

  constructor(private webReqService: WebRequestService) { // this line is injecting the web-request service we created

   }

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

  getList(){
    return this.webReqService.get('lists'); 
  }
  
  getTasks(listId: string) {
    return this.webReqService.get(`lists/${listId}/tasks`);
  }
  
  createTask(title: string, listId: string) {
    // We want to send a web request to create a Task
    return this.webReqService.post(`lists/${listId}/tasks`,{ title }); // this is returning a observable
  }

  complete(task: Task){
    return this.webReqService.patch(`lists/${task._listId}/tasks/${task._id}`,{
      completed: true // maybe could be set to !completed?
    } )
  }
  

}

标签： angulartypescript