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)