One issue I encountered is with a component featuring increment and decrement buttons. These buttons are meant to interact with specific products, yet when clicked, all text inputs update simultaneously instead of just the intended one.
COMPONENT HTML:
<div *ngFor="let product of products">
<button (click)="minus()" type="button">
-
</button>
<input id="number" type="text" value="1" [(ngModel)]="count">
<button (click)="plus()" type="button">
+
</button>
</div>
COMPONENT TYPESCRIPT:
count: number = 1;
plus(){
this.count++;
}
minus(){
if (this.count > 1) {
this.count--;
}
}
Errors arise when using this alternative approach:
<div *ngFor="let product of products; let i = index">
<input id="number" type="number" value="1" [(ngModel)]="products[i].count">
</div>
The error message reads: Property 'count' does not exist on type '{ id: number; name: string; price: number; description: string; }'.
Another attempt yields an error as follows:
<input id="number" type="number" value="1" [(ngModel)]="product[i].count">
This time, the error states: Element implicitly has an 'any' type because expression of type 'number' can't be used to index type '{ id: number; name: string; price: number; description: string; }'. No index signature with a parameter of type 'number' was found on type '{ id: number; name: string; price: number; description: string; }'.
A glance at how the products array is defined:
export interface Product {
id: number;
name: string;
price: number;
description: string;
}