打字稿:
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的内容,但是我不知道该怎么做。寻求建议
你可以在这里找到一个stackblitz演示如何使用HttpClient
,Observable
以及async
管道。
请允许我为您推荐一些最佳做法:
$
在可观察变量名称之后使用,以将其与其他不可观察变量明确区分。您应该使用async
可观察的管道。
无需订阅即可填充数组。async
管道的可观察性非常强大。
与模型区分API
响应,并在内部区分项目模型。(如果是这样)。您可以在我的示例中看到,它get
返回一个ApiResponse
模型,但是在检索的数组之后ApiItem
。
更新:
HttpClient.get
返回一个Observable。就像一条管道。然后,您可以定义一个运算符链,并且每次发出数据时,数据都将通过此管道,以进行转换。在此示例中,api返回一个ApiResponse
具有一个唯一属性的对象:ApiItem数组。
map
运算符转换输入值。在这里,它返回项目列表。
您会发现很多有关Observable和管道运算符的优秀教程。例如,带有来自Asim的Observables的HTTP示例。
希望这可以对您有所帮助。
是! 确实有帮助,但是您能否进一步说明(map(response => response.items)的作用是什么?第一个和第二个响应来自何处?
我有这样的结构:
export class ApiResponse { status: number; message: number; result: any; }
export class myList{ id: number; name: string; }
我自己解决了。
this.myList$ = this.apiService.getMyList().pipe(map(result => result.result));
非常感谢您出色的stackblitz演示!很有帮助!我更新了更多详细信息。