Question

在 Angular 13 中从 rest Api 获取数据时遇到问题吗？

2022-06-02

522

angular typescript

我们如何从 angular 中的对象数组中获取数据。我提供了 typescript 和服务文件以及控制台图像。我们如何才能获取图像中结果对象内的数据？

Ts 文件

this.commonService.fetchVersionValue().subscribe((data) => {
      console.warn(data);
    });

服务文件

fetchVersionValue(): Observable<IVersionDetails[]> {
    return this.http.get<IVersionDetails[]>(
      `${this.PHP_API_SERVER}/api/get/versions`
    );
  }

图像

查看控制台时出现错误

php 服务器的 Api 帮助我解决了这个问题。提前致谢

Answer 1

this.commonService.fetchVersionValue().subscribe((response: any) => {
      console.warn(response.results.data);
    });

这有效！！！

Answer 2

您的版本详细信息值存储在返回响应中的 data 属性中。因此您需要迭代该属性值。

this.commonService.fetchVersionValue().subscribe((response) => {
   console.warn(response.data); // Renaming to response for clarity
});

Answer 3

这是因为您向 *ngFor 指令传递的是对象文字，而不是可迭代对象（数组）。您从 typescript 文件绑定到模板的属性未指向屏幕截图中 API 端点响应中的数据键。在订阅中执行 subscribe((response)=>console.log(response['data'])) ，这将解决您正确访问数组中名为 data 的对象的问题。将此 response['data'] 分配给属性并将其传递给 *ngFor 。–