0

Este error me esta saliendo tratando de traer un Enumerable de una web api, es algo sencillo pero llevo toda la tarde de saber porque; el método de mi webAPi esta así, corre bien y se visualiza en postman

 [HttpGet]
    public async Task<ActionResult<IEnumerable<Products>>> GetProducts()
    {
        return await _context.Products.ToListAsync();
    }

Son 5 registros dummy. De angular tengo el servicio creado así:

produc-list.component.html

<table class="table" >
<thead>
  <tr>
    <th>Product Name</th>
    <th>Unit In Stock</th>
    <th>Unit Price</th>
  </tr>
</thead>
  <tbody ngFor="producto in ListadoProductos">
    <tr>{{ producto.productName }}</tr>
    <tr>{{ producto.unitInStock }}</tr>
    <tr>{{ productos.unitPrice }}</tr>
  </tbody>
</table>
<button class="btn btn-primary">Regresar</button>

En mi componente donde llamo el servicio se encuentra...

export class ProductosListComponent implements OnInit {

  ListadoProductos: Products[];

  constructor(private serviceProd: ProductosService) { }

  ngOnInit() {
    this.serviceProd.getProduct()
    .subscribe(products => this.ListadoProductos = products,
     error => console.error(error));
  }

la interface del objeto

export interface Products {
    productName: string;
    unitsInStock: number | null;
    unitPrice: number | null;
}

el servicio lo he escrito asi...

@Injectable()
export class ProductosService {

  constructor(private clientHttp: HttpClient) { }

  getProduct(): Observable<Products[]> {
    return this.clientHttp.get<Products[]>(environment.apiURL + 'api/products');
  }
}

Alguien me puede ayudar, creo que es algo sencillo que no reconoce la variable productName pero no encuentro la razón.

El error:

ProductosListComponent.html:19 ERROR TypeError: Cannot read property 'productName' of undefined at Object.eval [as updateRenderer] (ProductosListComponent.html:19) at Object.debugUpdateRenderer [as updateRenderer] (core.js:23937) at checkAndUpdateView (core.js:23312)

1 respuesta 1

0

He realizado una revisón en el código que compartes, observo que el problema real no es el que dice exactamente allí, el que no existe la propiedad productName.

Realmente tienes varios errores.

  1. el ngFor que tienes no tiene el * al inicio. Debe quedar de la siguiente manera

*ngFor

  1. La expresión del ngFor es errónea tienes

producto in ListadoProductos

Debes modificarlo y dejarlo de la siguiente manera:

let producto of ListadoProductos

  1. El ultimo tr que creaste, tiene un error tipográfico con la variable producto, le agregaste la letra s al final. Reemplaza:

{{ productos.unitPrice }}

Por

{{ producto.unitPrice }}

  1. Comprendo que deseas mostrar en una tabla la información que traes en tu arreglo, pero estás usando el ngFor donde no es, te dejo como deberías implementarlo.
<table class="table">
  <thead>
    <tr>
      <th colspan="3">Product</th>
    </tr>
    <tr>
      <th>productName</th>
      <th>unitInStock</th>
      <th>unitPrice</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let producto of ListadoProductos">
      <td>{{ producto.productName }}</td>
      <td>{{ producto.unitInStock }}</td>
      <td>{{ productos.unitPrice }}</td>
    </tr>
  </tbody>
</table>
<button class="btn btn-primary">Regresar</button>

Espero te sirva.

Tu Respuesta

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

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