如何将异步管道与可观察量<ApiResponse>一起使用

Question

Typescript：

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);
});
});

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

Answer 1

你可以在这里找到一个关于如何使用HttpClient、Observable和async管道的堆栈闪电战演示。

请让我建议你一些最佳实践：

• 在可观察变量名称后使用$，以清楚地将其与其他不可观察变量区分开来。您应该使用async可观察的管道。

• 无需订阅以填充数组。使用管道async可观察量非常强大。

• 用您的模型区分API响应和内部的物料模型。(如果是这样的话(。您可以在我的例子中看到，get返回一个ApiResponse模型，但是在我们检索ApiItem数组之后。

更新：

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

你会发现很多关于可观察量和管道操作员的好教程。例如，HTTP 示例与来自 Asim 的可观察量。

希望这能对你有所帮助。