将 json 数据从后端加载到打字稿/角度中

Question

我正在尝试将 json 数据从后端服务加载到我的角度应用程序。我想将数据加载/推送到数组中。以下是我来自后端的数据的样子

{   "Record":[
  {
     "Name":"John",
     "Place":"Seattle"
  },
  {
     "Name":"AS2",
     "Place":"DC"
  }]}

这是我在打字稿中的数组模型类

export class EventMaster {
  public name: string;
  public cityName: string;
  constructor (name: string, cityName: string){
    this.cityName = cityName;
    this.name = name;
  }
}

这是我的打字稿代码，我用它来从后端获取数据并加载到数组中

  private eventMaster: EventMaster[] = [
   new EventMaster('Loan', 'Approved' )
  ];
  onFetchData(form: HTMLFormElement){
    console.log(form);
    console.log(form.value);
    this.nameCity = new NameCity(form.value.name, form.value.city);
    this.fetchDataService.fetchData(this.nameCity).subscribe(
      (data: EventMaster[]) => {
        console.log(data);
        this.eventMaster.push(...data);
        console.log(this.eventMaster.length);
      }
        );
  }

这是我的http getcall。

 fetchData(nameCity: NameCity) {
  return this.http.get<EventMaster[]>(this.baseURL);
  }

当我尝试检查数组的长度时，它总是显示为 1 而不是 2。我做错了什么？

Answer 1

您需要映射获取 API 调用的结果

fetchData(nameCity: NameCity) {
    return this.http.get(this.baseURL).map((res: any) => res.Record.map(r=>new EventMaster(r.Name, r.Place));
}

Answer 2

onFetchData 是如何执行的？它可能只运行一次。同时放置 console.log(this.eventMaster.length(;在此功能之外并尝试