Angular 在FormArray和formGroup中选择角材料垫

我有一个formgroup，其中包含2个mat select和一个输入字段。在第一组中，我从第一个mat select中选择一个值，相应地，第二个mat select将填充第一个mat select中所选值的数据。然后我从第二个mat select中选择一个值，然后在第三个控件中输入一个值，这是一个简单的输入。然后我按下一个按钮添加另一个formgroup，现在当我从第一个mat选择值时，选择前一个grouparray中第二个mat选择的值将从视图中消失，但当我检查表单值时，它就在那里。我不明白是什么触发了这件事。有人能帮我找到原因并解决问题吗

<div formArrayName="rawmaterialwh">
                <div [formGroupName]="i" *ngFor="let product of products.controls; let i=index">
                   <legend>{{i+1}}</legend>
                     <div class="form-group row">
                      <div fxLayout="row wrap" fxLayoutAlign="space-between center">
                         <mat-form-field>
                            <mat-select formControlName="supplier" class="form-control"
                               (selectionChange)="onSupplierValueChange($event)" placeholder="Supplier">
                               <mat-option disabled selected hidden>Supplier</mat-option>
                               <mat-option *ngFor="let supplier_mode of supplierOption"
                                  [value]="supplier_mode.supplierid">{{supplier_mode.name}}</mat-option>
                            </mat-select>
                         </mat-form-field>
                      </div>
                   </div>
                   <div class="form-group row">
                      <div fxLayout="row wrap" fxLayoutAlign="space-between center">
                         <mat-form-field>
                            <mat-select formControlName="rawmaterialid" class="form-control" placeholder="Raw Material"
                               (selectionChange)="onProductValueChange($event)">
                               <mat-option disabled selected hidden>Product</mat-option>
                               <mat-option *ngFor="let product_mode of productOption"
                                  [value]="product_mode.rawmaterialid">{{product_mode.rawmaterialname}}</mat-option>
                            </mat-select>
                         </mat-form-field>
                         <div fxFlex.gt-sm="49" fxFlex.gt-xs="49" fxFlex="100">
                            <mat-form-field class="full-wid mrgn-b-md">
                               <input matInput placeholder="Quantity" formControlName="qty" id="{{ 'qty' + i }}">
                            </mat-form-field>
                         </div>
                         <button *ngIf="!_isUpdating" class="mrgn-all-xs" class="mrgn-all-xs" mat-mini-fab color="warn"
                            (click)="deleteProduct(i)">
                            <mat-icon>delete</mat-icon>
                         </button>
                      </div>
                   </div>
                </div>
             </div>

{{i+1}}
供应商
{{supplier_mode.name}
产品
{{product_mode.rawmaterialname}
删除

---

问题在于，对所有第二个mat select使用相同的变量（需要使用数组）

想象一下你定义了什么

productOption:any[]=[];

当您更改suplier时，请进一步传递索引值

<mat-select formControlName="supplier"
            (selectionChange)="onSupplierValueChange($event,i)">

onSupplierValueChange(suplierId,index){
   //I imagine you has some like
   this.productOption[index]=this.list.find(x=>x.id=supplierId).options
   //or you call to an API o whatever, but remember you change
   this.productOption[index]=... 

}

供应商价值变更（供应商ID，索引）{
//我想你有一些
this.productOption[index]=this.list.find（x=>x.id=supplierId）.options
//或者你调用了一个API o，但记住你改变了
此.productOption[索引]=。。。
}

然后只需在第二个选择框中迭代这个.productOption[i]

<mat-select formControlName="rawmaterialid" ...>
   <mat-option disabled selected hidden>Product</mat-option>
   <mat-option *ngFor="let product_mode of productOption[i]"
           [value]="product_mode.rawmaterialid">
           ....
    </mat-option>
 </mat-select>

产品
....

太好了，干杯，伙计！！