所以我有以下問題：
我有這個html：
<tbody>
<tr *ngFor='let product of productList'>
<td>{{product.name}}</td>
<td>{{product.quantity}}</td>
<td>{{product.price}}</td>
<td *ngIf="isLoggedInConfirmed()">
<div [formGroup]="quantityInput">
<input type="number" min="0" formControlName="quantity">
</div>
</td>
<td *ngIf="isLoggedInConfirmed()">
<button>Add to cart</button>
</td>
</tr>
</tbody>
...它構建了一個帶有輸入和按鈕的表格。如何分配每個按鈕以從其旁邊的輸入中提取資料？
目前，此實作無法正常作業。每個按鈕都從添加數字的最后一個輸入中獲取資訊。
從螢屏截圖中 - 假設最后輸入的輸入是最后一行的 1。所有按鈕都將獲得 1 作為資訊。如果我在第二行輸入新數字，所有按鈕都會得到這個數字。
怎樣才能克服這個問題，讓每個按鈕都獲得它旁邊的輸入值呢？
uj5u.com熱心網友回復：
為此，您需要輸入具有多個控制元件。為此，您需要按如下方式更改 HTML（假設您要使用反應式控制元件）
<tbody *ngIf="productForm" [formGroup]="productForm">
<tr *ngFor='let product of productList; let i = index'>
<td>{{product.name}}</td>
<td>{{product.price}}</td>
<td *ngIf="isLoggedInConfirmed()">
<input type="number" min="0" formControlName="quantity{{i}}">
</td>
<td *ngIf="isLoggedInConfirmed()">
<button>Add to cart</button>
</td>
</tr>
</tbody>
請注意，我已將formControlName="quantity"更改為formControlName="quantity{{i}}"
在 ts 中，您需要相應地構建表單組
const group: any = {};
this.productList.forEach((product, i) => {
group['quantity' i] = new FormControl(product.quantity || '', Validators.required);
});
this.productForm = new FormGroup(group);
這是示例stackblitz
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/516218.html
標籤：html有角度的打字稿