Question

这是我的代码段，我可以根据需要添加新表行，但是如何从ngFor中的表中获取值？ *表格处于反应形式

<tr *ngFor="let row of tableRow; let i = index">
 <th scope="row" class="text-center">{{ i+1 }}</th>

 <td>
  <div class="form-group">
   <input type="text" class="form-control" id="supplierRequirementDesc" placeholder="e.g Wiring & Piping" formControlName="suppReqInput">
  </div>
 </td>

 <td>
  <div class="form-group">
   <select class="form-control" id="supplierUnitPcs" formControlName="suppUnitPcsInput">
    <option value="" disabled selected>Pcs</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
   </select>
  </div>
 </td>

 <td>
  <div class="form-group">
   <input type="text" class="form-control" id="supplierQuantityInput" placeholder="Quantity" formControlName="suppQuantityInput">
  </div>
 </td>
</tr>

</tbody>
</table>

<button type="button" class="btn btn-primary btn-form" (click)="addTableRow()">+ Add new item</button>
<button type="button" class="btn btn-primary btn-form" (click)="deleteRow()">- Remove item</button>

这是console.log中的当前数据职称：abc 说明：def 公司成立于：GHI 公司类型：2 供应商类别：4 债券价值：100 已验证：是 供应商要求：zbc 供应商单位：2 供应商数量：1257 供应商注释：xzx

Answer 1

您可以通过row

(click)="getTableRow(row)"

获取价值

getTableRow(row)
{
   console.log(row)
}

Answer 2

我认为每次迭代都有一个单独的表单组，并且每个表单组都有一个单独的表单控制对象，这些对象可以重用类方法。所以我建议对以前的答案做些小改动，在HTML下方添加到所有输入标签。

//In HTML

(ngModelChange) = takeValues(this.suppUnitPcsInput.value);

//In component
takeValues(values){
    console.log(values)
}

然后点击“ addRow”按钮，即可完成行添加过程。

如何从反应形式的动态表中获取价值？

2 个答案: