傳遞輸入值並以角度加減

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;
}

+

-