传递输入值并以角度对其进行加减
P粉879517403
P粉879517403 2024-03-28 20:20:41
0
1
407

我需要将金额(例如 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}} 并传递值,但它不允许我对值进行加法和减法,因为操作将不再进行数量。

P粉879517403
P粉879517403

全部回复(1)
P粉322918729

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

现在,您的组件作为一个整体,有一个 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;
}



热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板