Angularでサーバーからデータを取得してくる処理。No overload matches this call.

Question

##Angularにて、サーバーからデータを取得してくる処理を書いているのですが、下記エラーが発生しました。

ERROR in src/app/app.component.ts:47:51 - error TS2769: No overload matches this call.
      Overload 1 of 5, '(observer?: PartialObserver<Comment[]>): Subscription', gave the following error.
        Argument of type '(comments: Comment[]) => void' is not assignable to parameter of type 'PartialObserver<Comment[]>'.
          Property 'complete' is missing in type '(comments: Comment[]) => void' but required in type 'CompletionObserver<Comment[]>'.
      Overload 2 of 5, '(next?: (value: Comment[]) => void, error?: (error: any) => void, complete?: () => void): Subscription', gave the following error.
        Argument of type '(comments: Comment[]) => void' is not assignable to parameter of type '(value: Comment[]) => void'.
          Types of parameters 'comments' and 'value' are incompatible.
            Type 'Comment[]' is not assignable to type 'import("F:/Github/Angular-async-mysql/src/app/class/comment").Comment[]'.
              Type 'Comment' is missing the following properties from type 'Comment': id, date, message, uid, user
    
    47       this.uniqueService.readComments().subscribe((comments:Comment[])=>{
                                                         ~~~~~~~~~~~~~~~~~~~~~~~
    
      node_modules/rxjs/internal/types.d.ts:64:5
        64     complete: () => void;
               ~~~~~~~~
        'complete' is declared here.

実行したコードは以下です。

export class AppComponent implements OnInit {
  comments: Comment[];
  constructor(private uniqueService: UniqueService) { }
  ngOnInit() {
      this.uniqueService.readComments().subscribe((comments:Comment[])=>{
      this.comments = comments;
      console.log(this.comments);
    });
  }
  createComment(form){
    this.uniqueService.createComment(form.value);
  }
}

export class UniqueService {
  constructor(public http: HttpClient) { }
  ip=IpService.getIPAddress()
  readComments(): Observable<Comment[]>{
    return this.http.get<Comment[]>(this.ip + 'chat-CRUD/read.php');
  }
  createComment(comment: Comment): Observable<Comment>{
    return this.http.post<Comment>(this.ip + 'chat-CRUD/create.php', comment);
  }
}

import { User } from './user';
export class Comment {
  id: number;
  date: number;
  message: string;
  uid: number;
  user: User;
}

export class User {
  initial: string;
  constructor(public uid: number, public name: string) {
    this.initial = name.slice(0, 1);
  }
}

<?php
require 'database.php';

$comments = [];
$sql = "SELECT comments.id as id, comments.date as date, comments.message as message, comments.userId as userId, users.name as name FROM comments JOIN users ON comments.userId = users.id";

if($result = mysqli_query($con,$sql)) {
  $i = 0;
  while($row = mysqli_fetch_assoc($result)) {
    $comments[$i]['id']    = $row['id'];
    $comments[$i]['date'] = $row['date'];
    $comments[$i]['message'] = $row['message'];
    $comments[$i]['uid'] = $row['userId'];
    $comments[$i]['user']['uid'] = $row['userId'];
    $comments[$i]['user']['name'] = $row['name'];
    $i++;
  }

  echo json_encode($comments);
} else {
  http_response_code(404);
}

以下がread.phpにアクセスした際に受け取れるデータです。

[{"id":"1","date":"2021-03-01 08:32:22","message":"\u304a\u3064\u3067\u30fc\u3059\uff01","uid":"1","user":{"uid":"1","name":"\u4f50\u85e4 \u8003\u592a"}},{"id":"2","date":"2021-03-01 08:32:22","message":"\u4f5c\u696d\u7d42\u308f\u3063\u305f\u30fc\uff1f","uid":"1","user":{"uid":"1","name":"\u4f50\u85e4 \u8003\u592a"}},{"id":"3","date":"2021-03-01 08:32:48","message":"\u304a\u3064\u3067\u30fc\u3059\uff01","uid":"2","user":{"uid":"2","name":"\u68ee\u4e95 \u5c07\u88d5"}},{"id":"4","date":"2021-03-01 08:32:48","message":"\u7d42\u308f\u3063\u3066\u307e\u30fc\u3059","uid":"2","user":{"uid":"2","name":"\u68ee\u4e95 \u5c07\u88d5"}},{"id":"5","date":"2021-03-02 07:30:39","message":"aaaaaaaaa","uid":"1","user":{"uid":"1","name":"\u4f50\u85e4 \u8003\u592a"}}]

#####また、以下のコードでも実行してみたのですが、エラーが出ました。

  ngOnInit() {
    this.uniqueService.readComments().subscribe(comments => : this.comments = comments);
  }

ERROR in src/app/app.component.ts:51:61 - error TS2322: Type 'Comment[]' is not assignable to type 'import("F:/Github/Angular-async-mysql/src/app/class/comment").Comment[]'.
    
    51     this.uniqueService.readComments().subscribe(comments => this.comments = comments);
                                                                   ~~~~~~~~~~~~~
    src/app/app.component.ts:51:61 - error TS2322: Type 'Comment[]' is not assignable to type 'import("F:/Github/Angular-async-mysql/src/app/class/comment").Comment[]'.
      Type 'Comment' is missing the following properties from type 'Comment': id, date, message, uid, user
    
    51     this.uniqueService.readComments().subscribe(comments => this.comments = comments);
                                                                   ~~~~~~~~~~~~~

どこの記述が間違っているのでしょうか？
色々調べてもよくわからず困っています。ぜひとも助けてください。お願いいたします。

Answer 1

Commentがクラスではなくinterfaceまたはtypeの間違いではないですか？