如何使用模型在 Angular 中设置 Observable 的数据类型

Question

我有一个与服务相关的非常基本的问题。我的服务中有这个方法getAllArticlesFromDb，它将使用HTTP 的GET 调用从API 中获取数据。方法如下：

article.service.ts

getAllArticlesFromDb() : Observable<any> {
  return this._httpClient.get('https://obscure-tundra-38074.herokuapp.com/api/articles');
}

我认为我不应该使用<any>，因为我知道 API 返回的对象的结构。所以我创建了一个模型：

article-model.ts

export class Article {
    articleid: string | undefined;
    title: string | undefined;
    content: string | undefined;
    date: string | undefined;
    contributor: string | undefined;
}

问题从这里开始。为什么我不能像这样修改我的服务方法：

import { Article } from './model/article-model';

getAllArticlesFromDb() : Observable<Article> {
  // same GET call
}

我收到此错误：

“类型'可观察对象'不可分配给类型'可观察文章'。 “对象”类型可分配给极少数其他类型。您的意思是改用“任何”类型吗？ 类型 'Object' 缺少类型 'Article' 的以下属性：articleid、标题、内容、日期和另外 1 个。”

请纠正我的错误。

Answer 1

您需要在HttpClient get 调用上使用泛型重载。然后返回将匹配您的方法签名中指定的内容。

import { Article } from './model/article-model';

getAllArticlesFromDb() : Observable<Article> {
  return this._httpClient.get<Article>('https://obscure-tundra-38074.herokuapp.com/api/articles');
}

---

在读取结束点 url 和方法名称后，您可能打算返回该类型的数组，在这种情况下将其更改为 Array<Article>>。

import { Article } from './model/article-model';

getAllArticlesFromDb() : Observable<Array<Article>> {
  return this._httpClient.get<Array<Article>>('https://obscure-tundra-38074.herokuapp.com/api/articles');
}

Answer 2

因为this.http.get 返回一个Observable<any>。您可以使用this.http.get<Article> 指定返回的对象类型或使用this.http.get(<parameters>) as Observable<Article> 进行强制转换