0

Me gustaría saber cuál es la falla que estoy teniendo en mi código. El error que me arroja cuando quiero cargar la tabla con todos los datos de la base es el de: Cannot read property 'denominacion' of undefined

A continuación mostraré primero el código con su lógica que se necesita para armar la tabla, y luego esta última:

Clases

export interface ArticuloManufacturado {

id?: number;
denominacion?: string;
tiempoDePreparacion?: number;
imagen?: string;
precioVenta?: number;

rubroGeneral?: RubroGeneral;
detalles?: ArticuloManufacturadoDetalle[];

}

export interface RubroGeneral {

id?: number;
denominacion?: string;

}

export interface ArticuloManufacturadoDetalle {

id?: number;
cantidad?: number;
articuloInsumo?: ArticulosInsumos;

}

export interface ArticulosInsumos {

id?: number;
denominacion?: string;

}

Lógica empleada

export class ArticulosmanufacturadosComponent implements OnInit {

manufacturados: ArticuloManufacturado[];

constructor(private service: ArticulomanufacturadoService) { }

ngOnInit(): void {
this.getManufacturados();
}

getManufacturados() {
this.service.getManufacturados().subscribe(res => {
  this.manufacturados = res;
  //console.log(res)
    })
  }
}

TABLA

<div class="container">
<table class="table table-bordered table-striped">
    <thead>
        <tr>
            <th>ID</th>
            <th>Denominacion</th>
            <th>Tiempo de preparación</th>
            <th>Imágen</th>
            <th>Precio-Venta</th>
            <th>Rubro-General</th>
            <th>Detalles</th>
            <th>Acciones</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let manufacturado of manufacturados">
            <td><span>{{manufacturado.id}}</span></td>
            <td><span>{{manufacturado.denominacion}}</span></td>
            <td><span>{{manufacturado.tiempoDePreparacion}}</span></td>
            <td><span>{{manufacturado.imagen}}</span></td>
            <td><span>{{manufacturado.precioVenta}}</span></td>
            <td><span>{{manufacturado.rubroGeneral.denominacion}}</span></td>
            <td>
                <ul>
                     <li *ngFor="let item of manufacturado.detalles">
                         {{item.cantidad}} - {{item.articuloInsumo.denominacion}}
                     </li>
                </ul>
            </td>
            <td>
                <button class="btn btn-sm btn-info">
                    <i class="fa fa-search"></i>Detalles</button>
                <button class="btn btn-sm btn-warning">
                    <i class="fa fa-edit"></i>Editar</button>
                <button class="btn btn-sm btn-danger">
                    <i class="fa fa-remove"></i>Eliminar</button>
            </td>
        </tr>
    </tbody>
</table>

Imagen de lo que se me devuelve por consola al ejecutar un console.log con la respuesta:

introducir la descripción de la imagen aquí

Los datos me los trae casi todos, los que no son los del segundo ciclo 'ngFor. Que son los pertenecientes a los detalles. Más específicamente el de {{item.articuloInsumo.denominacion}}

8
  • A mi parecer no le está llegando el dato a la variable articuloInsumo por lo tanto cuando la aplicación quiere leer un atributo de un undefined se rompe. Cualquier ayuda que necesite con gusto le ayudaré. La variable en la barra de herramientas de su navegador en network se llama compararía. Commented el 18 dic. 2020 a las 13:51
  • ya haz hecho console.log de la respuesta para comprobar que te llega toda la información desde la api?
    – Franco
    Commented el 18 dic. 2020 a las 13:53
  • Hola, si. Me trae toda la información. Sinceramente no se que puede ser :( Commented el 18 dic. 2020 a las 13:56
  • Si puedes, pon una imagen o copia la respuesta del api con console.log, talvez el error esta allí
    – Franco
    Commented el 18 dic. 2020 a las 14:00
  • Ahí lo hice, si puedes chequearlo te lo agradecería un montón ! Commented el 18 dic. 2020 a las 14:12

3 respuestas 3

0
  • Al parecer la respuesta es sencilla: tu arreglo llamado
    manufacturados no ha sido inicializado.

  • manufacturados: ArticuloManufacturado[]; ===> así está.

  • manufacturados: ArticuloManufacturado[] = []; ====> así debe estar.

0

Esto es debido a que primero se carga tu html antes de que los valores a recorrer sean asignados a la propiedad, para solucionar agrega un 'ngIf' en tu tabla para que no muestre hasta que este cargado tu propiedad con los datos a recorrer: la propiedad a crear es 'load'

.html:

<div class="container">
<table *ngIf="load" class="table table-bordered table-striped">
    <thead>
        <tr>
            <th>ID</th>
            <th>Denominacion</th>
            <th>Tiempo de preparación</th>
            <th>Imágen</th>
            <th>Precio-Venta</th>
            <th>Rubro-General</th>
            <th>Detalles</th>
            <th>Acciones</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let manufacturado of manufacturados">
            <td><span>{{manufacturado.id}}</span></td>
            <td><span>{{manufacturado.denominacion}}</span></td>
            <td><span>{{manufacturado.tiempoDePreparacion}}</span></td>
            <td><span>{{manufacturado.imagen}}</span></td>
            <td><span>{{manufacturado.precioVenta}}</span></td>
            <td><span>{{manufacturado.rubroGeneral.denominacion}}</span></td>
            <td>
                <ul>
                     <li *ngFor="let item of manufacturado.detalles">
                         {{item.cantidad}} - {{item.articuloInsumo.denominacion}}
                     </li>
                </ul>
            </td>
            <td>
                <button class="btn btn-sm btn-info">
                    <i class="fa fa-search"></i>Detalles</button>
                <button class="btn btn-sm btn-warning">
                    <i class="fa fa-edit"></i>Editar</button>
                <button class="btn btn-sm btn-danger">
                    <i class="fa fa-remove"></i>Eliminar</button>
            </td>
        </tr>
    </tbody>
</table>

typeScript:

export class ArticulosmanufacturadosComponent implements OnInit {

manufacturados: ArticuloManufacturado[];
load: boolean;

constructor(private service: ArticulomanufacturadoService) { }

ngOnInit(): void {
this.getManufacturados();
}

getManufacturados() {
this.service.getManufacturados().subscribe(res => {
  this.manufacturados = res;
  load = true;
  //console.log(res)
    })
  }
}
0

Coloca el *ngIf en el tbody para que lo imprima sólo si viene true:

<tbody *ngIf="manufacturado">

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