Autocomplete 带过滤器的角度自动完成

我有一个问题，如何创建一个过滤的自动完成列表，并在不同的表单数组控件中使用它

我的表单模型：

 this.prodForm = this.fb.group({
            date: ['', Validators.required],
            priority: ['', Validators.required],
            products: this.fb.array([])
        });

 var product = this.fb.group({
        name: '',
        isTrial: '',
    })

自动完成列表：

this.filteredMachineProducts = this.productCtrl.valueChanges.
        startWith(null).
        map(name => this.filterMachineProducts(name));

 filterMachineProducts(val: string) {
    return val ? this.machineProducts.filter((s) => s.name.match(new RegExp(val, 'gi'))) : this.machineProducts;
}

和前面：

<div formArrayName="products">
  <div *ngFor="let product of products.controls; let p=index" [formGroupName]="p">
    <mat-expansion-panel [expanded]="true">
      <mat-expansion-panel-header>
        <mat-panel-title>
          Produkt #{{p + 1}}
          <mat-panel-description>
            &nbsp;
            <button mat-raised-button color="primary" type="button" (click)="removeProduct(p)">Usuń</button>
          </mat-panel-description>
        </mat-panel-title>
      </mat-expansion-panel-header>
      <div fxLayout="row" fxLayoutWrap="wrap">
        <div fxFlex.gt-sm="25" fxFlex.gt-xs="50" fxFlex="100">
          <mat-form-field>
            <input matInput placeholder="Asortyment" [matAutocomplete]="productAutoComplete" [formControl]="productCtrl">
          </mat-form-field>
          <mat-autocomplete #productAutoComplete="matAutocomplete" [displayWith]="displayFn">
            <mat-option *ngFor="let machineProduct of filteredMachineProducts | async" [value]="machineProduct" (onSelectionChange)="getProductMachine(machineProduct, p)">
              <span>{{ machineProduct.name }}</span>
            </mat-option>
          </mat-autocomplete>
        </div>

Produkt{{p+1}
乌苏
{{machineProduct.name}

现在我使用单独的formControl，但它应该是formControlName=“name”

---

是否应该为循环中的每个自动完成创建筛选列表？

是的，您需要为每个自动完成创建筛选列表

我已经回答了这样一个问题