Question

我有以下服务：

import { Component } from '@angular/core';
import { ApiService } from './shared/api.service';
import {PowerPlant} from './shared/models/powerplant.model';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  powerPlants: PowerPlant[];

  constructor(private apiService: ApiService) {
  }

  allPowerPlants(onlyActive: boolean = false, page: number = 1): void {
    const path = `$/powerPlants?onlyActive${onlyActive}&page${page}`;
    this.apiService.get(path).map() // TODO: parse and set the JSON to my model
  }
}

在apiService的get方法中，这就是我所做的：

get(path: string, params: URLSearchParams = new URLSearchParams()): Observable<any> {
    return this.http.get(`${environment.api_url}${path}`, { headers: this.setHeaders(), search: params })
      .catch(this.formatErrors)
      .map((res: Response) => res.json());
  }

所以我想解析这个Json数组，如果在任何一个数组元素中有任何错误，我想忽略它并为其余有效的数据填充powerPlant数组！有什么指针吗？

编辑：我尝试了下面帖子中提到的建议，我收到错误，如屏幕截图所示：

这是为什么？是抱怨PowerPlant是一个接口，我需要在创建它的新实例时为属性提供值吗？

Answer 1

假设您的api服务返回一个对象数组，可以将其视为PowerPlant对象，这就是您可以做的。

powerPlants: PowerPlant[] = []; //initialize the array.

allPowerPlants(onlyActive: boolean = false, page: number = 1): void {
    const self = this;
    const path = `$/powerPlants?onlyActive${onlyActive}&page${page}`;
    this.apiService.get(path).subscribe(
        powerplants:any[] => {
            powerplants.forEach(item=>{
                if(isPowerPlant(item)){
                    // cast the item as PowerPlant
                    self.powerPlants.push(item as PowerPlant);
                }
           }); 
        },
        err=> {
            // handle error
        });
}

// define the type guard
isPowerPlant(item:any):item is PowerPlant {
    // check for the required properties of PowerPlant here and return true/false.
    // example:
    return item["powerplantProp1"] && item["powerplantProp2"];
}

此外，如果您的api服务不是通用的，那么您可以选择从Observable<PowerPlant[]>方法而不是get返回Observable<any>。为此，您可以使用(res: Response) => res.json() as PowerPlant[]。但是，这仅仅是为了输入目的。

参考文献：

https://scotch.io/tutorials/angular-2-http-requests-with-observables
https://basarat.gitbooks.io/typescript/docs/types/typeGuard.html

希望这有帮助。

打字稿将值映射到模型类型

1 个答案: