Question

我有一项服务，可以从服务器返回所有产品详细信息。现在我需要另一个功能来优化产品细节并仅显示所需的键值。我所做的是创建一个名为product_Subset的新接口，并输入我需要的键值。像这样

Time

然后在我的服务类中创建这个新函数

  export interface IProduct_ExportCSV {
    name: string;
    cspeed:string;
    maxlp:string;
    position:string;
    xposition:string;
    yposition:string;
}

但这是从服务器返回所有产品值而不是过滤并仅显示我在界面中提到的键值。然后在组件类中，我像这样调用子目录，

getProducts_ExportCSV(): Observable<IProduct_ExportCSV[]> {
        return this.http.get(this.productUrl, this.getRequestOptions())
            .map(this.extractData)
            //.do(data => console.log('ALL: ' +JSON.stringify(data)))
            .catch(this.handleError);
    }

我的产品服务中的Extract方法

onExportCVS()
      {
        this.productDataService.getProducts_ExportCSV().subscribe((product_dataCSV: 
        IProduct_ExportCSV[]) =>{
           this.productCSV = product_dataCSV;
            console.log("Export to cvs!!! "+JSON.stringify(this.productCSV));
        }),
        (err:any) => console.log(err),
        () => console.log('getProductsssss() retrieved products');

有人可以指导我正确的方式。谢谢！

Answer 1

您仍需要在extractData方法中自己映射必填字段，例如

private extractData(response: Response) {
    let body = response.json();

    return body.map((product) => {
        return  {
            name: product.name,
            cspeed: product.cspeed,
            maxlp: product.maxlp,
            position: product.position,
            xposition: product.xposition,
            yposition: product.yposition
          }
    });

}

声明该方法的返回类型为IProduct_ExportCSV []不会自动为您映射必填字段 - 这只会有助于确保返回正确的值。

您已经声明observable将返回一个类型为IProduct_ExportCSV的数组 - 但您的extractData函数返回一个对象 - 我的上面版本假定它实际上是一个数组声明所声明的数组。

如果您正在寻找一种简单的方法来自动将返回的json映射到对象类型，请查看https://github.com/mobxjs/serializr

Angular 2 - 显示从服务器返回到客户端的一些JSON密钥值

1 个答案: