使用 Angular 中的 Observables 从 HTTPClient API 调用中获取“数据”数组答案

【问题标题】：Fetch array of 'data' from HTTPClient API call using Observables in Angular使用 Angular 中的 Observables 从 HTTPClient API 调用中获取“数据”数组
【发布时间】：2021-05-14 14:03:07
【问题描述】：

我有一个服务，我想通过 HTTP GET 请求访问这种形式的数据：

   "data": [
    {
        "id": "432",
        "Time": "06:25",
        "Place": "Atalanta"
    },
    {
        "id": "581",
        "Time": "18:21",
        "Place": "Georgia"
    }
   ]

我创建了一个服务来调用它，它执行此返回方法

return this.http.get<DataGroup>(url);

以及访问这些数据的两个类模型：

import { DataGroupValue } from './DataGroupValue';

export class DataGroup{
    value: DataGroupValue[] = [];
}

（但不知道它是否做得对）


export class DataGroupValue {
    id: string;
    Time: string;
    Place: string;
}

还有一个组件试图调用这个不起作用的方法

export class TestPlannerComponent implements OnInit {

  DataGroupValues = new Array<DataGroup>();

  constructor(private dataService: DataService ) { }

  ngOnInit(): void {
    this.dataService.GetDataGroup.subscribe((res:DataGroup))=>{
        this.DataGroupValues=res; //errors here
      }
  }

}

我们如何访问这些值？

【问题讨论】：

您遇到的错误是什么？

标签： angular api observable httpclient

【解决方案1】：

你的类型根本不匹配，所以 Typescript 正确地告诉你。如果您确实以包含数组的对象data 的形式接收响应：

 {
   "data": [
    {
        "id": "432",
        "Time": "06:25",
        "Place": "Atalanta"
    },
    {
        "id": "581",
        "Time": "18:21",
        "Place": "Georgia"
    }
   ]
}

您需要创建与这些属性匹配的模型。我喜欢使用接口：

export interface DataGroupResponse {
  data: DataGroupValue[]; // use 'data' as that is what you are getting!
}

export interface DataGroupValue {
  id: string;
  Time: string;
  Place: string;
}

然后你需要正确地告诉http你收到了什么，所以你收到的响应是DataGroupPayload类型的。在这里，我已经从data 中提取数组并将数组作为DataGroupValue 发送回：

import { map } from 'rxjs/operators';

// ...

getDataGroup(): Observable<DataGroup[]> { // send back the array
  return this.http.get<DataGroupPayload>(url).pipe(  // what you are receiving is "DataGroupPayload"
    map((data: DataGroupPayload) => data.data as DataGroupValue[])
  )
}

然后在你的组件中，

dataGroupValues = <DataGroupValue[]>[]; // array

ngOnInit(): void {
  this.dataService.getDataGroup().subscribe((res: DataGroupValue[]))=>{
     this.dataGroupValues = res;
  }
}

PS，注意我使用了 camelCase，这通常是我们命名函数/变量的方式。

【讨论】：

感谢您的回复！似乎某些组件的名称可能需要稍作更改以使其更清晰。例如 DataGroupPayload 和 DataGroupValue[]，如果您相应地命名它们，它们将不起作用。如果可以，请重命名它们以进行澄清。尽管如此，根据我从其他人那里得到的意见，该解决方案似乎还不错。再次感谢。（编辑：getDataGroup(): Observable 和 data.data as DataGroupValue[] 给我一个错误，因为它们不是同一类型。它们都应该是 DataGroupValue[] 吗？这是唯一不目前给我错误）

【解决方案2】：

DataGroupValues = new Array();

DataGRoupValues 不需要是一个数组，因为它里面的数据已经是一个数组，你必须使用它来处理数据

改成

数据组值；要么数据组值 = {};

【讨论】：