Angular 带有自定义 ViewModel 的 HttpClient

Question

我正在利用 HttpClient 而不是 Http 进行服务调用以及运行良好的 Observable。但是，我想映射一些自定义属性。那是我们可以获取和映射的东西吗？

给你背景：我有一项服务：调用 web api 并将结果打包到 Observable> like>

getArticles(): Observable<Array<ArticleViewModel>> {
   return this.httpClient.get<Array<ArticleViewModel>>(this.url.articleurl);
}

接下来我有一个组件，它像这样调用这个服务器：

getArticles(): void {
  this.articles = this.articleService.getArticles();
}

最后，我有了 ViewModel，它具有 Article ViewModel 的所有属性。

但是，Web Api returns 的属性比我的 Angular 视图模型中的属性多得多。此外，某些属性的名称与我在 Angular VM 中的名称不同。所以，我想映射那些具有正确属性的映射，而且我想使用一些网络 api 属性只是为了在设置 Angular 属性值之前进行验证。

但同时，我不想使用http (@angular/http)。我想继续使用最新的 httpclient (@angular/common/http)。但是该服务直接将结果映射到我的 angular 视图模型。

那么我们可以通过检查所有 Web api 属性来有意义地创建视图模型吗？

Answer 1

当然，甚至真的很简单！

return this
  .httpClient
  .get<ArticleViewModel[]>(this.url.articleurl)
  .map(articles => {
    const mapped: ArticleViewModel[] = [];
    for (let article of articles) {
      const _a = new ArticleViewModel(/* fields */);
      mapped.push(_a);
    }
    return mapped;
  });

如果您的 class 中有一个构造函数，这将是小菜一碟！

Angular 带有自定义 ViewModel 的 HttpClient

Angular HttpClient with Custom ViewModel

angular

angular-httpclient