Angular:如何使静息Api反应可观察到

Question

我有点陷入困境。我需要从来自API响应的元素中制作一个下拉列表。所说的API不需要在网站加载时调用，因为这样的部分并不总是使用，事实上几乎从不使用，所以我将其编码在按钮onClick事件中。此外，API响应不一定包含后端上的所有元素(所有数据都像150兆字节和50万"合作伙伴"(。所以现在，它被编码为10。这是一个入门项目的概念验证。我想像这样迭代：

<select data-live-search="true">
<option *ngFor="let partner of partners$ | async" [value]="partner.name"> </option>
</select>

这里的partners$是一个Partner数组。

partners$!: Partner[];

Partner是一个包含约150个元素(或更多(的类。

目前，该解决方案抛出TS2769编译器错误。

从我在互联网上搜索的内容来看，我发现我需要让它变得可观察。(试图让它变得令人难以忍受，但没有成功(我的理解是，我需要为每个元素制作一个get集等。更大的问题是，合伙人可能会改变，我需要重做一些或很多东西。有没有一种方法，可以动态地使API响应可观察到，而无需我输入get-set&发射器连续2天？(我知道我可以生成东西，但这只会把它减少到几个小时(

提前感谢

Answer 1

首先，您需要将声明更改为：

import { Observable, of } from 'rxjs';
//...
partners$: Observable<Partner[]>;

然后，您需要将此字段与远程服务绑定。

您最初可以(在组件的构造函数中(设置以下内容：

this.partners$ = of([]); //empty array

然后调用服务onClick:

this.partners$ = this.httpClient.get<Partner[]>("https://api-url");

(假设您已将Angular的httpClient注入组件(