温馨提示:本文翻译自stackoverflow.com,查看原文请点击:angular - How to use the async pipe with an Observable
angular asynchronous pipe

angular - 如何在Observable中使用异步管道

发布于 2020-04-18 20:44:52

打字稿:

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的内容,但是我不知道该怎么做。寻求建议

查看更多

提问者
Jan Bürger
被浏览
105
Thierry Falvo 2020-02-05 01:44

你可以在这里找到一个stackblitz演示如何使用HttpClientObservable以及async管道。

请允许我为您推荐一些最佳做法:

  • $在可观察变量名称之后使用,以将其与其他不可观察变量明确区分。您应该使用async可观察的管道。

  • 无需订阅即可填充数组。async管道的可观察性非常强大

  • 与模型区分API响应,并在内部区分项目模型。(如果是这样)。您可以在我的示例中看到,它get返回一个ApiResponse模型,但是在检索的数组之后ApiItem

更新:

HttpClient.get返回一个Observable。就像一条管道。然后,您可以定义一个运算符链,并且每次发出数据时,数据都将通过此管道,以进行转换。在此示例中,api返回一个ApiResponse具有一个唯一属性对象:ApiItem数组。 map运算符转换输入值。在这里,它返回项目列表。

您会发现很多有关Observable和管道运算符的优秀教程。例如,带有来自Asim的Observables的HTTP示例

希望这可以对您有所帮助。