时间戳

首页 > 解决方案 > 如何将异步管道与 Observable 一起使用

angular - 如何将异步管道与 Observable 一起使用

问题描述

打字稿：

getMyList(): Observable<ApiResponse> {
    return this.http.get<ApiResponse>(this.myListUrl);
  }

this.myList = getMyList();

HTML：

<ng-select [items]="myList | async">

The List: 
Id: 1, Name: foo; Id: 2, Name: bar; ...

早些时候我做了这样的事情，但这不适用于异步（使用管道）：

getList().subscribe(data => {
   data.result.forEach(entry => {
      this.myList.push(entry.Name);
   });
});

我阅读了一些将 Observable ApiResponse 映射到 Observable MyList 的内容，但我不知道该怎么做。寻求建议

标签： angularasynchronouspipe

解决方案

你可以在这里找到一个关于如何使用和管道的stackblitz 演示。HttpClientObservableasync

请我建议您一些最佳做法：

  • 在您的可观察变量名称之后使用$以清楚地区分它与其他不可观察变量。您应该使用async带有 observable 的管道。

  • 无需订阅即可填充数组。async可观察对象在管道中非常强大。

  • 用您的模型区分API响应和内部的项目模型。（如果是这样的话）。您可以在我的示例中看到，它get返回一个ApiResponse模型，但在我们检索一个ApiItem.

更新：

HttpClient.get返回一个 Observable。这就像一个管道。然后，您可以定义一系列运算符，每次发出数据时，它都会通过此管道，以便进行转换。在这个例子中，api 返回一个ApiResponse对象，它有一个唯一的属性：一个 ApiItem 数组。 map运算符转换输入值。在这里，它返回项目列表。

你会发现很多关于 Observables 和管道操作符的好教程。例如带有来自Asim的 Observables 的 HTTP 示例。

希望这可以帮助你一点。

推荐阅读