Angular 7 中 X 类型的参数不可分配给 X 类型的参数错误

Question

我有两个模型，名为 "UserBook" 和 "Comment"。

图书型号： book_comments 是 Comment

类型的数组

export class UserBook {
    id: number;
    book_name: string;
    book_comments: Array<Comment[]>;

    constructor(book) {
        this.id = book.id ? book.id : null;
        this.book_name = book.name ? book.name : null;
        this.book_comments = [];
    }
}

评论模型：

export class Comment {
    id: number;
    comment: string;
    date: string;

    constructor(comment) {
        this.id = comment.id ? comment.id : null;
        this.comment = comment.comment ? comment.comment : null;
        this.date = comment.date ? comment.date : null;
    }
}

我想创建一个新评论并将其推送到 UserBook 的评论数组中

book: UserBook;

postNewComment(comment): any {

    return this.http.post(environment.api + '/book/comments', {comment: comment}).pipe(
        tap(
            (response) => {
                this.book.book_comments.unshift(new Comment(response['comment']));
            },
            (error) => {
                console.log(error);
            }
        )
    );

}

但是我看到这个错误。

"Error: Argument of type Comment is not assignable to parameter of type Comment"

如果我将 book_comments 的类型更改为 "any" 那么它就可以工作了。

但我不明白为什么它不接受 Comment[] 类型。谁能帮我解决这个问题。

Answer 1

这是一种可能的解决方案。您已经声明了一个 T 数组，其中 T 也是一个数组。因此，要么在 Comment[] 数组中取消移位，要么尝试我在下面所做的没有后端调用的简化操作。

import { Component, OnChanges, OnInit } from '@angular/core';

    class UserBook {
      id: number;
      book_name: string;
      book_comments: Array<Comment> = [];

      constructor(book) {
        this.id = book.id ? book.id : null;
        this.book_name = book.name ? book.name : null;
      }
    }

    class Comment {
      id: number;
      comment: string;
      date: string;

      constructor(comment) {
        this.id = comment.id ? comment.id : null;
        this.comment = comment.comment ? comment.comment : null;
        this.date = comment.date ? comment.date : null;
      }
    }

    @Component({
      selector: 'app-home',
      templateUrl: './home.component.html',
    })
    export class HomeComponent implements OnInit {

      book: UserBook;

      public ngOnInit(): void {
        this.book = new UserBook({ id: 123, name: 'My Book' });
        this.book.book_comments.unshift(new Comment({ id: 1, comment: 'Hello World' }));
      }
    }

Angular 7 中 X 类型的参数不可分配给 X 类型的参数错误

Argument of type X is not assignable to parameter of type X error in Angular 7

model

typescript

angular7