Angular 9 Reactive Form - Array Form - 选择一个值以自动填充同一行中的其他单元格

Question

我在 Angular 中继续我的学习曲线，但我再次陷入困境，我想知道是否有人可以帮助我。

场景
我有一个表格，表格里面有一张桌子。 该表包含许多单元格，但它从用户从下拉列表中选择一个值开始。一旦用户选择了一个值，许多其他单元格将被自动填充（基于选择的单元格）。

问题
似乎通过使用响应式表单，我遇到了另一种麻烦，因为 onchanges 不起作用，我尝试将 arrayform 订阅到 observable 但我现在得到的只是 object:object

这是 HTML 代码：

<tr *ngFor="let itemrow of myorderForm.get('itemRows')['controls']; let i=index" [formGroupName]="i">
  <td>
    <input formControlName="orderLineNumber"  type="text" placeholder="{{ i + 1 }}">
  </td>
  <td>
    <select  formControlName="productName" input id="productName" [name]="productName" type="text">
        <option *ngFor="let thisproduct of allproducts;" value="thisproduct">{{thisproduct.productName}}</option>
     </select>                                  
   </td>
   <td> 
     <input formControlName="productScaleUoM" id="productScaleUoM" [name]="itemrow.productScaleUoM+ '_' + i" type="text"  [(ngModel)]="itemrow.productScaleUoM" placeholder="{{valueScale}}">
    </td>
    <td>
      <input formControlName="pack_quantity"  id="pack_quantity" [name]="itemrow.pack_quantity+ '_' + i" type="text"   [(ngModel)]="itemrow.pack_quantity" placeholder="{{valuePack}}">
    </td>
</tr>

TS 文件如下所示：

addNewRow() {
  this.formArr.push(this.initItemRows());
}

onChangeObj(newObj) {
  this.productname[0] = newObj;
  this.valueScale = this.productname[0].productScaleUoM
  this.valuePack = this.productname[0].pack_quantity
}

deleteRow(index: number) {
  this.formArr.removeAt(index);
}
formControlValueChanged() {
//Just testing to see if I get the value of the product name
    this.myorderForm.get('itemRows').valueChanges.subscribe(val => {
      this.formattedMessage = `My name is ${val}.`;
      console.log("What is formatted message here", this.formattedMessage)
    });

再次感谢任何帮助。

Answer 1

对于这种情况，您应该 添加一些内容，例如：

<select (change)="onChangeFunction($event)" >

标签中的函数并添加

<option [value]="thisproduct">

现在调用函数

onChangeFunction(data:any){
this.list=data;
console.log(this.list); //here you will get all the data on change event
}

如果你又卡住了，请评论。