Angular Material - mat-autocomplete 未填充到 ArrayForm 中

Question

这是一个复杂的表格，所以请耐心等待，我会尽力回答您的所有疑虑，以使其正常运行。
我正在尝试为具有 formArray 和 formGroup 的表单实现 mat-autocomplete。我在 formarray 外和 formarray 内的 2 个地方有自动完成功能。
对于 formarray 外的自动完成，我已经成功实现了该功能，但是对于 formarray 内的自动完成，我遇到了问题。
当我重新加载页面并且自动完成组件中没有加载任何数据时，出现以下错误。 [![错误][1]][1]

<div formArrayName="rawmaterialwh">
                <div [formGroupName]="i" *ngFor="let product of products.controls; let i=index">
                   <legend>{{i+1}}</legend>           
                      <div fxLayout="column">
                        <div fxLayout="row wrap" fxLayoutAlign="space-between center">
                           <div fxFlex.gt-sm="49" fxFlex.gt-xs="49" fxFlex="100" fxFlex.gt-md="49">
                              <mat-form-field attr.for="{{'rawmaterialid' + i}}"  class="full-wid mrgn-b-lg">
                                 <mat-label>{{'Raw Material'|translate}}</mat-label>
                                 <input type="text" matInput formControlName="rawmaterialid" [matAutocomplete]="rawMaterialAutocomplete" />
                                 <mat-autocomplete autoActiveFirstOption #rawMaterialAutocomplete="matAutocomplete"
                                    [displayWith]="showRawMaterialName.bind(this)" (selectionChange)="onProductValueChange($event,i)">
                                    <mat-option disabled selected hidden>{{'Raw Material'|translate}}</mat-option>
                                    <mat-option *ngFor="let product_mode of filteredRawMaterial  | async" [value]="product_mode.rawmaterialid">{{product_mode.name}}</mat-option>
                                 </mat-autocomplete>
                                 <mat-error *ngIf="products.controls[i].get('rawmaterialid').hasError('required')"> {{'Select Raw Material'|translate}} </mat-error>
                              </mat-form-field>



                              <!-- <mat-form-field  attr.for="{{'rawmaterialid' + i}}"  class="full-wid mrgn-b-lg">
                                 <mat-label>{{'Raw Material'|translate}}</mat-label>
                                  <mat-select formControlName="rawmaterialid" (selectionChange)="onProductValueChange($event,i)">
                                     <mat-option disabled selected hidden>{{'Raw Material'|translate}}</mat-option>
                                     <mat-option *ngFor="let product_mode of productOption"
                                        [value]="product_mode.rawmaterialid">{{product_mode.name}}</mat-option>
                                  </mat-select>
                                  <mat-error *ngIf="products.controls[i].get('rawmaterialid').hasError('required')"> {{'Select Raw Material'|translate}} </mat-error>
                               </mat-form-field> -->
                           </div>

组件代码


 ngOnInit(): void {

this.filteredRawMaterial = this.form.controls.rawmaterialwh.get('rawmaterialid').valueChanges
      .pipe(
        tap(value => console.log('value in tap ', value)),
        startWith(''),
        map(value => this._filterRawMaterial(value))
      );

}  
[![form][2]][2]


  [1]: https://i.stack.imgur.com/Gw3Wf.gif
  [2]: https://i.stack.imgur.com/ZhoTN.gif

Answer 1

来自我对 , if we need know the index, as we create the formGroup and subscribe in a function, we can use the "index". Is like this 的评论。

你可以，例如将“索引”传递给函数“search_Products”或在添加组

时使用pipe.tap

addProductGroup(index) {
    ...
    this.productList$[index] = group.get("product_name").valueChanges.pipe(
      tap(_=>this.index=index),  //<--store in a variable "index" the index of
                                 //   the autocomplete we are changed
      debounceTime(300),
                                 //or pass to the function search_Products
      switchMap(value => this.productService.search_Products(value,index))
    );
}

Angular Material - mat-autocomplete 未填充到 ArrayForm 中

Angular Material - mat-autocomplete not populating in ArrayForm

angular-material

angular