在尝试从Ionic获取Wordpress中的某些内容时，总是会出错。
[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);
}
}
答案 0 :(得分：0)
问题出在post.page.ts中的以下代码中-
console.log(document.getElementsByClassName('mb-3')[0].innerText)在这里，您尝试将可观察到的“ this.getPost(this.id).subscribe((post: Post) => {
this.post = post;
loading.dismiss();
});
”响应分配给this.getPost。 “ this.post”的响应不是this.getPost类型的[它是一个数组；这就是提到的编译错误-类型'[Post，any，{} []]''不能分配给类型'Post'。]。
您可以将服务的getPost更改为project forkJoin，将输出更改为"Post"，例如[forkjoin之后的通知映射运算符]-
"Post"或像这样更新您在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