1

mi problema es el siguiente, tengo una variable producto que guarda un json el cual puedo mostrar en el html sin problema, pero lo que quiero es sumas el precio al total y me sale indefinido

import { Component, OnInit } from '@angular/core';
import { ProductoService } from '../../services/producto.service'

@Component({
  selector: 'app-caja',
  templateUrl: './caja.component.html',
  styleUrls: ['./caja.component.css']
})
export class CajaComponent implements OnInit {
  public total:number=0;
  public producto:any;
  public idProducto:number;
  constructor(protected productoServices: ProductoService) { }
  ngOnInit() {
  }
  lanzar(id:number){
this.buscarProducto(id);
this.total += this.producto.precio;
  }
  buscarProducto(id:number){
this.productoServices.getProducto(id).subscribe(data=>(this.producto = data));
  }
}

ERROR TypeError: "this.producto is undefined"

1 respuesta 1

1

El json lo estás obteniendo asíncronamente, por lo que no puedes asegurar que tenga un valor en el momento que estás calculando el total.

Lo lógico sería calcular el total dentro del callback:

buscarProducto(id:number){
  this.productoServices.getProducto(id).subscribe(
    data => {
      this.producto = data;
      this.total += data.precio;
    });
}

Incluso te sobraría la función lanzar(id). De todos modos, calcular el total así sólo puede dar problemas. Es mejor que almacenes los precios en un array y que calcules el total donde sea necesario.

Pero si es lo que sospecho que quieres hacer, tendrías que pensar en guardar los productos como un array por si necesitas luego quitar o añadir alguno. El total es muy simple obtenerlo como propiedad:

private productos: any[] = [];

get sumaTotal(): number {
  return this.productos.reduce(((suma, producto) => suma + producto.precio, 0);
}

Editado

Como no es muy seguro trabajar con el tipo any, podemos declarar un interface con los atributos mínimos que tendría nuestro producto:

interface ProductoConPrecio {
  id?: number;
  nombre: string;
  precio: number;
  [propName: string]: any;
}

private productos: ProductoConPrecio[] = [];

...
2
  • 1
    tambien seria bueno declarar la clase Producto con propiedades de precio, nombre, cantidad, etc para eliminar Any y tener un mejor control de tus elementos Commented el 13 mar. 2019 a las 21:33
  • 1
    @MiguelZarate Lo ideal es que el servicio devuelva objetos de la clase Producto definida. Pero no siempre viene el json con todos los atributos que esperas. Completo la respuesta. Commented el 14 mar. 2019 a las 0:18

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.