Cuando llamo a la función map () en un objeto JSON analizado (en la función mapStocks () como se muestra a continuación), falla si coloco la función toStock () dentro de la clase StockService. Sin embargo, si declaro la función como una función "global" fuera de la clase StockService, no arrojará un error.

import { Injectable } from '@angular/core';
import { Http, Headers, Response } from '@angular/http';
//import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';

import { Stock } from './stock';

@Injectable()
export class StockService {
    private baseUrl: string = 'https://www.vendor-api-website.com';

    constructor(private http: Http) {
    }

    getStocks(): Promise<Stock[]> {
        console.log('Loading stocks...');

        let stocks$ = this.http
        .get(`${this.baseUrl}/api/getInventory`, { headers: this.getHeaders() })
        .map(this.mapStocks)
        .toPromise()
        .catch(this.handleError);

        return stocks$;
    }

    private getHeaders() {
        let headers = new Headers();
        headers.append('Accept', 'application/json');
        return headers;
    }

    private handleError(error: any): Promise<any> {
        //console.error('An error occurred', error); // for demo purposes only
        return Promise.reject(error.message || error);
    }

    private mapStocks(response:Response): Stock[] {
        console.log('Mapping inventory...');
        // this fails...
        return response.json().map(this.toStock);
        // ..but this is okay?
        //return response.json() as Stock[];
    }

    // This succeeds if declared as a function and placed outside the class
    private toStock(stockObject:any): Stock {
        console.log('toStock called');

        let stock = <Stock>({
            id: stockObject.id,
            code: stockObject.code,
            name: stockObject.name,
            description: stockObject.description,
            supplier: stockObject.supplier,
            cost: stockObject.unitPrice * stockObject.minQuantity,
            quantity: stockObject.minQuantity
        });

        console.log('Parsed stock:', stock);

        return stock;
    }
}

Como puede ver, necesitamos la función toStock () para hacer algunos cálculos antes de asignarla a nuestra propia matriz de objetos Stock.

El error que se produce si declaro la función toStock () en la clase StockService es este: ingrese la descripción de la imagen aquí ¿Alguien podría explicar por qué esto es así? ¿Es una limitación de TypeScript?

0
StrangeCode 24 mar. 2017 a las 09:47

2 respuestas

La mejor respuesta

Está configurando una función JavaScript normal aquí: .map(this.mapStocks). El objeto this cambiará al de la función en lugar de la clase. Aquí this.toStock() no está definido.

Utilice Function.Prototype.bind()

.map(this.mapStocks.bind(this))

Llamada completa:

 let stocks$ = this.http
    .get(`${this.baseUrl}/api/getInventory`, { headers: this.getHeaders() })
    .map(this.mapStocks.bind(this))
    .toPromise()
    .catch(this.handleError);
4
Suraj Rao 24 mar. 2017 a las 07:10
  getStocks(): Promise<Stock[]> {
console.log('Loading stocks...');
let stocks$ = this.http
  .get(`${this.baseUrl}/api/getInventory`, { headers: this.getHeaders() })
  .map(res => { return this.toStock(res.json()) })
  .catch(this.handleError);
}
-2
Prateik 24 mar. 2017 a las 07:09