如何解决像 void' is not assignable to parameter of type '(value: [Post, any, {}[]]) => void' 这样的错误

Question

在尝试从 Wordpress.

中获取 Ionic 中的某些内容时，我不断遇到错误

[ng] ERROR in src/app/post/post.page.ts(30,37): error TS2345: Argument of type '(post: Post) => void' is not assignable to parameter of type '(value: [Post, any, {}[]]) => void'.
[ng]   Types of parameters 'post' and 'value' are incompatible.
[ng]     Type '[Post, any, {}[]]' is not assignable to type 'Post'.
[ng]       Property 'author' is missing in type '[Post, any, {}[]]'.

这是我的 wordpress-restapi-service.ts 文件：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, forkJoin, throwError, empty, of } from 'rxjs';
import { catchError, map, mergeMap } from 'rxjs/operators';

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

  baseRestApiUrl: string = 'https://my-website-here/wp-json/wp/v2/';

  constructor(private httpClient: HttpClient) { }

  getRecentPosts(categoryId: number, page: number = 1): Observable<Post[]> {
    // Get posts by a category if a category id is passed
    let category_url = categoryId ? ("&categories=" + categoryId) : "";

    return this.httpClient.get(this.baseRestApiUrl + "posts?page=" + page + category_url).pipe(
      map((posts: Post[]) => {
        return posts.map((post) => new Post(post));
      }),
      catchError(error => {
        return Observable.throw('Something went wrong ;)');
      })
    );
  }

  getPost(postId) {
    return this.httpClient.get(this.baseRestApiUrl + "posts/" + postId).pipe(
      map((res: any) => res),
      flatMap((post: any) => {
        return forkJoin(
          of(new Post(post)),
          this.getComments(post.id),
          this.getCategories(post)
        )
      })
    );
  }

    getComments(postId: number, page: number = 1) {
    return this.httpClient.get(this.baseRestApiUrl + "comments?post=" + postId).pipe(
      map(comments => {
        let commentsArray = [];     

        Object.keys(comments).forEach(function (key) {
          commentsArray.push(new Comment(comments[key]));
        });

        return commentsArray;
      }),
      catchError(val => of(val))
    );
  }

  getCategories(post) {
    let observableBatch = [];

    post.categories.forEach(category => {
      observableBatch.push(this.getCategory(category));
    });

    return forkJoin(observableBatch);
  }

  getCategory(categoryid: number): Observable<Category> {
    return this.httpClient.get(this.baseRestApiUrl + "categories/" + categoryid).pipe(
      map(category => {
        return new Category(category);
      }),
      catchError(val => of(val))
    );
  }
}

export class Post {
  author: number;
  categories: number[];
  comment_status: string;
  content: object;
  date: string;
  date_gmt: string;
  excerpt: object;
  featured_media: number;
  format: string;
  guid: object;
  id: number;
  link: string;
  meta: object;
  modified: string;
  modified_gmt: string;
  ping_status: string;
  slug: string;
  status: string;
  sticky: boolean;
  tags: number[];
  template: string;
  title: object;
  type: string;
  _links: object;

  constructor(values: Object = {}) {
    Object.assign(this, values);
  }
}

export class Category {
  id: number;
  count: number;
  description: string;
  link: string;
  name: string;
  slug: string;
  taxonomy: string;
  parent: number;
  meta: object;

  constructor(values: Object = {}) {
    Object.assign(this, values);
  }
}

export class Comment {
  id: number;
  author: number;
  author_email: string;
  author_ip: string;
  author_name: string;
  author_url: string;
  author_user_agent: string;
  content: object;
  date: string;
  date_gmt: string;
  link: string;
  parent: number;
  post: number;
  status: string;
  type: string;
  author_avatar_urls: object;
  meta: object;

  constructor(values: Object = {}) {
    Object.assign(this, values);
  }
}

这是错误所在页面的片段：

  getPost(postId) {
    return this.httpClient.get(this.baseRestApiUrl + "posts/" + postId).pipe(
      map((res: any) => res),
      flatMap((post: any) => {
        return forkJoin(
          of(new Post(post)),
          this.getComments(post.id),
          this.getCategories(post)
        )
      })
    );
  }

我已经检查了 rxjs docs，但找不到任何可以帮助我的东西。我在那里找不到 flatMap，所以我一定做错了什么，但我不知道是什么...

编辑： 还有我的 post.page.ts，按要求：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { LoadingController } from '@ionic/angular';
import { WordPressRestapiService, Post } from '../services/wordpress-restapi.service';

@Component({
  selector: 'app-post',
  templateUrl: './post.page.html',
  styleUrls: ['./post.page.scss'],
})
export class PostPage implements OnInit {

  id: string;
  private post: Post = new Post;

  constructor(
    public loadingController: LoadingController, 
    private route: ActivatedRoute, 
    private wordpressService: WordPressRestapiService) {}

  async ngOnInit() {

    const loading = await this.loadingController.create();
    await loading.present();

    this.id = this.route.snapshot.paramMap.get('id');

    this.getPost(this.id).subscribe((post: Post) => {
      this.post = post;
      loading.dismiss();
    });
  }

  getPost(postId) {
    return this.wordpressService.getPost(postId);
  }
}

Answer 1

问题出在您的 post.page.ts -

中的以下代码中

this.getPost(this.id).subscribe((post: Post) => {
      this.post = post;
      loading.dismiss();
    });

在这里，您试图将可观察到的“this.getPost”的响应分配给 this.post。 “this.getPost”的响应不是"Post"类型[它是一个数组；这就是编译错误所提到的 - Type '[Post, any, {}[]]' is not assignable to type 'Post'..

您可以像这样更改服务的 getPost 以将 forkJoin 输出投影到 "Post" [注意 forkjoin 后的地图运算符] -

getPost(postId) {
    return this.httpClient.get(this.baseRestApiUrl + "posts/" + postId).pipe(
      map((res: any) => res),
      mergeMap((post: any) => {
        return forkJoin(
          of(new Post(post)),
          this.getComments(post.id),
          this.getCategories(post)
        ).pipe(
          map((joined) => joined[0])
        )
      })
    );
  }

或者像这样更新 post.page.ts 中的代码 -

this.getPost(this.id)
    .pipe(map(v) => v[0])
    .subscribe((post: Post) => {
      this.post = post;
      loading.dismiss();
    });

如何解决像 void' is not assignable to parameter of type '(value: [Post, any, {}[]]) => void' 这样的错误

How to solve errors like void' is not assignable to parameter of type '(value: [Post, any, {}[]]) => void'

wordpress

rxjs

ionic-framework

angular

ionic4