Estoy queriendo recorrer con un ngFor* una POKEAPI... que la pongo en un arreglo de objetos que ya lo tengo declarado en mi componente... Pero cuando ya la consumí, me tira este error escrito en el titulo en la consola en la solapa NETWORK...
Yo antes tenia mi arreglo de objetos tipado con otras características a las que tiene la API, pero quise aunquesea que me muestre un solo campo del arreglo de objetos poniéndole el mismo nombre y tampoco me sigue sin andar y me tira el error propiamente dicho.
Dejo mi codigo que creo que es donde puede estar el error y ademas el github de mi "minitrabajo"...
Mi servicio de DATA.
const URL = 'https://pokeapi.co/api/v2/pokemon/'
@Injectable({
providedIn: 'root'
})
export class ProductDataService {
constructor(private http: HttpClient) { }
public getALL(): Observable<Productos[]> {
return this.http.get<Productos[]>(URL);
}
}
Mi HTML donde recorrro con el NgFor el supuesto arreglo suplantado por la API.
<td>{{item.Nombre | uppercase}}</td>
<td>{{item.Categoria}}</td>
<td><img class="img-thumbnail" [src]="item.image" [alt]="item.Nombre" width="100" height="100"></td>
<td>{{item.Precio | currency}}</td>
<td><span *ngIf="item.Stock==0" class="badge text-bg-warning"> SIN STOCK </span></td>
<td><app-input-number [(cantidad)]="item.cantidad" [max]="item.Stock" *ngIf="item.Stock" (maxReached)="maxReached($event)"></app-input-number></td>
<td><button class="btn btn-primary" (click)="addToCart(item)"> Comprar </button></td>
</tr>
</tbody>
</table>
Mi componente donde tengo las funciones para mostrar y donde tenia anteriormente mi arreglo de objetos:
products!: Productos [];
constructor(private cart: ProductsCartService, private dataService: ProductDataService ) {
}
ngOnInit(): void {
this.dataService.getALL().subscribe(data => this.products = data );
}
TIPADO DEL ARREGLO:
export interface Productos {
Nombre: string;
Categoria: string;
Precio: number;
Stock: number;
image: string;
clearance: boolean;
cantidad: number;
}
Aca mi link de github con este problema de angular. https://github.com/JoaquinPavon/AngularProblema
Muchas gracias como siempre por la paciencia!! PD: aunque ahora aparezca item.Nombre ya lo he cambiado a item.name como figura en la API y cambiado en el tipado.