Übergeben Sie Eingabewerte und addieren oder subtrahieren Sie sie in Grad

Question

Ich muss einen Betrag (z. B. 94) an den Additions- und Subtraktionseingang übergeben, damit ich von diesem Betrag statt von Null addiere oder subtrahiere.

Mein 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>

Meine ts:

quantity: number;

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

Ich brauche 94 und 60, um auf dem Zähler auf Null zu kommen, und um addieren und subtrahieren zu können.

Ich habe versucht, die Menge in der Zeile unten in {{item.quantity}} zu ändern und den Wert zu übergeben, aber es erlaubt mir nicht, die Werte zu addieren und zu subtrahieren, da die Operation nicht mehr für die Menge gilt.

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

+

-