1

我在理解如何转换我的 json 响应以适应我的多选界面时遇到了一些问题。

这是我从 api 得到的响应：

[
  {
    "TransportTypeId": 1,
    "Code": "RT  ",
    "Name": "Round Trip          "
  },
  {
    "TransportTypeId": 2,
    "Code": "N/A       ",
    "Name": "UnAllocated         "
  },
  {
    "TransportTypeId": 3,
    "Code": "OWOut     ",
    "Name": "OneWay Out          "
  },
  {
    "TransportTypeId": 4,
    "Code": "OWHome    ",
    "Name": "OneWay Home         "
  }
]

这是我试图将其映射到的界面：

export interface IMultiSelectOption {
    id: any;
    name: string;
    isLabel?: boolean;
    parentId?: any;
    params?: any;
    classes?: string;
}

我想映射TransportTypeId到id和Name到name。

正如我所说，我正在使用HttpClientAngular 4 中的新功能，并且在找到任何这样的示例时遇到了一些困难。

这是我的获取功能：

getTransportTypes(): Observable<TransportType> {
    let options: TransportType;
    let multiselect: IMultiSelectOption
    let requestUri = '/BaseData/TransportTypes';
    debugger;
    return this.http.get<TransportType>(`${this.flighttransportcapacityUrl}${requestUri}`)
}

这是返回响应并将其映射到与响应属性完全相同的 TransportType：

export class TransportType{
    TransportTypeId: number;
    Code: string;
    Name: string;
}

这工作正常，但我认为应该有一些更简单的方法将响应转换为IMultiSelectOptionthen 以循环 get 函数的结果？

包括我的肮脏方式。

    this.base.getTransportTypes().map(item => this.convertToMultiSelect(item)).subscribe(options => this.transportOptions = options)

和转换函数：

convertToMultiSelect(item: any): IMultiSelectOption[] {
    debugger;
    let v = item;

    let options = [];

    for (var i = 0; i < item.length; i++) {

        options.push({ id: item[i].TransportTypeId, name: item[i].Name})
    }

    return options;
}
4

1 回答 1

3

当您要将对象列表转换为相同大小的新列表时，请使用该map()方法。所以代码可能如下所示：

this.base.getTransportTypes()
  .map(transportTypes => transportTypes
    .map(trType => ({ id: trType.TransportTypeId, name: trType.Name }))
  )
  .subscribe(options => this.transportOptions = options)

或者，如果您想保留该 convertToMultiSelect方法：

convertToMultiSelect(items: TransportType[]): IMultiSelectOption[] {
  return items.map(item => ({ id: item.TransportTypeId, name: item.Name }));
}
于 2017-09-28T12:25:59.297 回答