使用 Angular 中的 Observables 从 HTTPClient API 调用获取 'data' 数组

Question

我有一个服务，我想从中访问来自 HTTP GET 请求的这种形式的数据：

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

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

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

和两个 class 模型来访问这些数据：

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

}

我们如何访问这些值？

Answer 1

DataGroupValues = new Array();

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

改成

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

Answer 2

您的类型根本不匹配，所以 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，请注意我使用了驼峰式命名，这通常是我们命名 functions/variables.

的方式

使用 Angular 中的 Observables 从 HTTPClient API 调用获取 'data' 数组

Fetch array of 'data' from HTTPClient API call using Observables in Angular

api

httpclient

observable

angular