Question

这是我第一次使用角度观察器，我对它的工作原理有点困惑。我得到了一个功能最强大的角度CLI应用程序，我只需要连接到我现有的API。

我有service这个功能

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

然后在我的component中，我有

public data: ApplicationInterface[];

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

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

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

的JSON结构

我似乎无法弄清楚如何以该JSON哈希方式访问数组。

如果我在console.log(data)块中subscribe，那么它是具有我期望的应用密钥的API响应，但如果我将数据分配更改为this.data = data.applications，{{1} } ng build

失败

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

Answer 2

如果您的返回类型为ApplicationInterface[]，则它是ApplicationInterfaces的数组，因此没有名为applications的属性。这与你的观察无关;没关系。相反，你错误输入了变量。

如果您不需要data的任何其他属性，则可以映射值：

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

但是，我建议在大多数情况下不要这样做。如果您的对象将来发生更改，则必须更改此功能和所有附加的订阅。相反，您应该为您的响应创建一个界面（您的响应现在与您提供的类型不匹配），并根据需要使用它的值。

Answer 3

最简单的解决方法是指出服务方法返回的数据的正确形式，因为它实际上并不返回数组：

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

现在在订阅中，您可以按照预期的那样获得数组

.subscribe(e => this.data = e.applications)

Angular2可观察JSON根元素

3 个答案: