传递输入值并以角度对其进行加减

Question

我需要将金额（例如 94）传递到加法和减法的输入，以便我从该金额而不是从零进行加或减。

我的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>

我的ts：

quantity: number;

  constructor(private datosService: DatosService) {
    this.quantity = 0;
    }

我需要 94 和 60 出现在计数器上将零归零的位置，并且能够进行加法和减法。

我尝试在下面的行中将数量更改为 {{item.quantity}} 并传递值，但它不允许我对值进行加法和减法，因为操作将不再进行数量。

Answer 1

对勇顺所说内容的更完整描述：

现在，您的组件作为一个整体，有一个 quantity 变量。

您的整个模板都引用了这个变量。

但是，您的模板正在呈现多行（*ngFor="let item of articulos"）。

每一行 (item) 都有自己的数量值 (item.cantidad)，但每一行都指向完全相同的单个 quantity 变量。

因此，如果您在第一行按 ，quantity 将变为 1。如果您在第二行按 ，quantity 将变为 2。

多行 ---> 一个 quantity 变量。

您需要一行 -> 一个数量变量。

您可以：

1. 使用您初始化并在模板中使用的额外属性来扩展您的 item 对象，例如

private onDataReceived(articulos: any[]): void {
    articulos.forEach((item: any) => {
        item.variableQuantity = item.cantidad;
    });

    this.articulos = articulos;
}

（而且，它是一个按钮，为什么不使用 button 元素？）

+

-

或者

您单独跟踪数量（仍需要初始化）：

public quantities = {};

private onDataReceived(articulos: any[]): void {
    articulos.forEach((item: any) => {
        quantities[item.articulo] = item.cantidad;
    });

    this.articulos = articulos;
}

+

-