单击按钮时如何获取输入数值答案

【问题标题】：how to get input number value when button is clicked单击按钮时如何获取输入数值
【发布时间】：2020-12-22 16:54:14
【问题描述】：

我不确定如何获取按钮的值...这是我的代码

<p *ngFor = "let product of ProductsDetails; let i = index">
   <input type="number" value={{cartProducts[i].amount}} class="quantInput"> 
  <button mat-raised-button color="primary" class="changeBTN">change</button>
</p>

注意：按钮和输入的数量是动态的，所以我不能有一个变量来保存输入的值，或者我只是不知道该怎么做

【问题讨论】：

答案在这里stackoverflow.com/questions/56203795/…
如果按钮和输入不是动态的，这将起作用...为此，我需要为每个输入保存一个变量，但我不知道我将有多少输入，所以这个答案是错误的
这很容易。您已经将所有内容嵌套在 ngFor 循环和索引 i 中以区分每个特定元素

标签： angular button input ngfor

【解决方案1】：

   <p *ngFor = "let product of ProductsDetails; let i = index">
     <input type="number" [(ngModel)]="values[i]" value={{cartProducts[i].amount}} class="quantInput"> 
     <button mat-raised-button color="primary" class="changeBTN" (click)="doSomethingWithInputValue(i)" >change</button>
   </p>

ts 文件

values: any[];

//initialize array when you have loaded productDetails
ProductDetails.forEach((productDetail) => {
     this.values.push({});
});


public doSomethingWithInputValue(index){

    const currentInputValue = this.values[index];
    ...do everything you want with this value here
    }

【讨论】：