使用 ng-for 從 Angular 中動態創建的文本框中獲取數據

Question

我已經創建了一組像這樣動態創建的文本框

  <input id="Pun{{item}}" type="text" 
    class="form-control textbox" placeholder=Punishment >

</div>

其中，penaltynum 是一個數字數組。 我想知道如何從每個創建的文本框中獲取數據，不勝感激。

Answer 1

我在stackblitz上創建了一個解決方案。

使用由*ngFor值迭代的值更新每個輸入，如下所示。

<div *ngFor="let item of items">
  <input id="Pun{{item}}" type="text" [(ngModel)]="pun[item]" 
    name="pun[item]" class="form-control textbox" placeholder="punishment 
  {{item}}" > {{pun}}
</div>

在哪里

items = [1, 2, 3, 4];
pun = [];

Answer 2

您可以使用 document.getElementById()。

您的 HTML 文件：

  <input id="Pun{{item}}" type="text" class="form-control textbox" placeholder=Punishment>

你的 ts 文件：

 var item="YOUR_ITEM_HERE";
 var textValue = (document.getElementById("Pun"+item) as any).value;