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

Question

我有一个服务，我想通过 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
      }
  }

}

我们如何访问这些值？

Answer 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，注意我使用了驼峰命名法，这通常是我们命名函数/变量的方式。

Answer 2

DataGroupValues = new Array();

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

只需更改为

数据组值； 或者 数据组值 = {};