Angular:使用函数将json get响应转换为类 [英] Angular: converting a json get response to class with functions

问题描述

所以基本上，我有一个Angular组件，该组件的DashboardConfiguration类型的变量被设置为Observable.此观察结果来自解析程序，该解析程序调用对json对象进行get请求的服务.

So basically I have an Angular component that has a variable of type DashboardConfiguration that is being set to an Observable. This observable comes from a resolver that calls a service that makes a get request for the json object.

问题在于，可观察对象将变量提供给普通对象，而不是DashboardConfiguration对象.这使我无法调用DashboardConfiguration函数.

The problem is that the observable is feeding the variable a plain Object, and not a DashboardConfiguration object. This is preventing me from calling a function of DashboardConfiguration.

我将其结构设计为非常相似

I have structured this to be very similar to this example which has all their code at the bottom of the article

DashboardConfiguration类，我需要将json强制转换为

The DashboardConfiguration class I need the json to be cast to

export class DashboardConfiguration {
  id:string;
  createdDate?:any;
  properties?:any;
  widgets:WidgetConfiguration[];

  //This is the function that is not being called
  public getWidgetByAlias(alias:string):WidgetConfiguration {
    this.widgets.forEach(function (widget) {

      if(widget.hasAlias(alias)){
        console.log("returining widget "+widget.id);
        return widget;
      }
    });
    return null;
  }
}

http-get响应:

The http-get response:

  "dashboard": {
      "id":"029c2322-8345-4eed-ac9e-8505042967ec",
      "createdDate": "",
      "properties": {
        //omitted form stackoverflow post},
      },
      "widgets":[
        {
          "id": "705c0853-e820-4c26-bc4c-e32bd7cb054c",
          "createdDate": "",
          "properties": {
            "aliases":[
              "test"
            ]
          }
        },
        {
          "id": "b5e161dd-e85e-44d4-9188-5f4d772d9b40",
          "createdDate": "",
          "properties": {
            "aliases":[
              "test1"
            ]
          }
        }
      ]
  }

Angular组件:

The Angular component:

export class DashboardComponent implements OnInit {

  configuration:DashboardConfiguration;

  constructor(private route:ActivatedRoute) { }

  ngOnInit() {
    this.configuration = this.route.snapshot.data['dashboard'];
    console.log(this.configuration.id);
  }

  //This is the function calling the function thats not working!
  getWidgetByAlias(alias:string):WidgetConfiguration {
    return this.configuration.getWidgetByAlias(alias);
  }

}

发出http请求的服务:

The service that makes the http request:

  constructor(private http:HttpClient) {}

  getConfiguration(uuid:string):Observable<DashboardConfiguration> {
    return this.http.get<DashboardConfiguration>('/api/dashboard',{params: {id: uuid}});
  }

解析器:

  constructor(private dashboardService:DashboardService){}

  resolve(route: ActivatedRouteSnapshot): Observable<DashboardConfiguration> {
    return this.dashboardService.getConfiguration(route.queryParams['id']); //this calls the service above
  }

推荐答案

您可以将json数据与新创建的对象结合使用，当我想对api响应数据使用任何类型的功能时，都可以使用它.

You can combine json data with new created object , I use this when I want to use any kind of functionality with api response data.

通过使用地图运算符

this.http.get<DashboardConfiguration>('/api/dashboard',{params: {id: uuid}})
  .map(result => Object.assign(new DashboardConfiguration(),result));

Object.assign()

这篇关于Angular:使用函数将json get响应转换为类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！