javascript - 使用 JSON 根元素可观察到的 Angular2

Question

这是我第一次使用 Angular 可观察对象，我对它的工作原理有点困惑。我得到了一个大部分功能正常的 Angular CLI 应用程序，我只需要连接到我现有的 API。

我有一个具有此功能的服务

public getApps(): Observable<ApplicationInterface[]> {
  return this.http.get(url);
}

然后在我的组件中，我有

public data: ApplicationInterface[];

ngOnInit() {
  this.route.params
    .subscribe(params => {
      this.fetchData();
    });
  }

fetchData() {
  this.service.getApps()
    .subscribe(data => {
      this.data = data;
    });
}

我的 api 端点返回 {"applications": []} 的 JSON 结构

我似乎无法弄清楚如何访问该 JSON 哈希中的数组。

如果我在 subscribe block 中 console.log(data) ，它是我期望的带有应用程序 key 的 API 响应，但是如果我更改数据分配this.data = data.applications，ng build 失败并显示 Property 'applications' does not exist on type 'ApplicationInterface[]'

Answer 1

您应该将界面设计为与响应保持一致。如果响应是对象，那么您也需要在界面中使用它。

尝试这样的事情(使用新的 HttpClient):

interface ApplicationInterfaceResponse {
    applications: ApplicationInterface[];
}

public getApps(): Observable<ApplicationInterface[]> {
    return this.httpClient
        .get<ApplicationInterfaceResponse>(url)
        .map(response => {
            console.log(response.applications);
            return data.applications;
        });
}