Angular：使用函数将 json get 响应转换为 class

Question

所以基本上我有一个 Angular 组件，它有一个类型为 DashboardConfiguration 的变量，该变量被设置为一个 Observable。这个 observable 来自一个解析器，该解析器调用一个服务，该服务对 json 对象发出获取请求。

问题是可观察对象正在为变量提供普通对象，而不是 DashboardConfiguration 对象。这使我无法调用 DashboardConfiguration 的函数。

我将其结构化为非常相似 to this example，它们的所有代码都在文章底部

DashboardConfiguration class 我需要将 json 转换为

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 响应：

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

Angular 组件：

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请求的服务：

  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
  }

Answer 1

简短的回答是 HttpClient 服务不会为您做这件事。正如您所说，它 returns 一个 JavaScript 对象，以您的 class 属性的形式出现......不是那个 class.

的实际实例

您需要添加自己的代码来创建正确类型的对象。

这里有个例子：

Answer 2

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

通过使用地图运算符

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

Object.assign()

Angular：使用函数将 json get 响应转换为 class

Angular: converting a json get response to class with functions

typescript

angular

angular-observable