I need to pass an amount (e.g. 94) to the input for addition and subtraction so that I add or subtract from that amount instead of from zero.
My html:
<tr *ngFor="let item of articulos">
<td>{{item.articulo}}</td>
<td>{{item.cantidad}}</td>
<td>
<input id="quantity" type="button" value="-" (click)="quantity=quantity-1">
<input type="text" id="quantity2" name="quantity" value="{{quantity}}">
<input id="quantity" type="button" value="+" (click)="quantity=quantity+1">
</td>
</tr>
My ts:
quantity: number;
constructor(private datosService: DatosService) {
this.quantity = 0;
}
I need 94 and 60 to appear on the counter to zero out, and to be able to add and subtract.
I tried changing the quantity to {{item.quantity}} in the line below and passing the value but it does not allow me to add and subtract the values as the operation will no longer be for the quantity.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
A more complete description of what Yongshun said:
Now, your component as a whole, has a
quantityvariable.Your entire template references this variable.
However, your template is rendering multiple rows (
*ngFor="let item of articulos").Each row (
item) has its own quantity value (item.cantidad), but each row points to the exact same singlequantityvariable.So if you press
quantitywill become 1. If you press on thesecondline,quantitywill change to 2.Multiple lines ---> A
quantityvariable.You need a row -> a quantity variable.
you can:
itemobject with additional properties that you initialize and use in the template, e.g.private onDataReceived(articulos: any[]): void { articulos.forEach((item: any) => { item.variableQuantity = item.cantidad; }); this.articulos = articulos; }(Also, it's a button, why not use the
buttonelement?)or
You track the quantity separately (still needs to be initialized):
public quantities = {}; private onDataReceived(articulos: any[]): void { articulos.forEach((item: any) => { quantities[item.articulo] = item.cantidad; }); this.articulos = articulos; }