ts 文件中的 autocomplete.options 仅在有多个下拉列表时提供第一个下拉列表中的选项

Question

我的应用程序有多个下拉菜单，全部使用 mat-autocomplete 实现。我对 matAutocomplete 属性使用了唯一值，而且我也设置了不同的 formControlName。仍然在任何地方获得相同的期权价值。请帮忙

这是我的代码片段

<mat-form-field appearance="fill" class="width_30">
 <mat-label>{{constants.specificationStatus}}</mat-label>
 <mat-icon class="suffix" matSuffix>arrow_drop_down</mat-icon>
  <input type="text" matInput formControlName="specificationStatus" [matAutocomplete]="auto">
   <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
    <mat-option *ngFor="let spec of filtereSpecs | async" [value]="spec">{{spec}}</mat-option>
   </mat-autocomplete>
</mat-form-field>
                  
<mat-form-field *ngIf="isNotBudget" appearance="fill" class="width_30">
    <mat-label>{{constants.competitor}}</mat-label>
    <mat-icon class="suffix" matSuffix>arrow_drop_down</mat-icon>
    <input type="text" matInput formControlName="competitor" [matAutocomplete]="autoComp">
    <mat-autocomplete #autoComp="matAutocomplete" [displayWith]="displayFn">
    <mat-option *ngFor="let comp of filteredCompetitor | async" [value]="comp">{{comp}}</mat-option>
    </mat-autocomplete>
</mat-form-field>

在Ts中：

@ViewChild(MatAutocomplete) autocomplete!: MatAutocomplete;

this.OppurtunityForm.controls['competitor'].valueChanges.subscribe(
(value) => {
    this.autocomplete.options.forEach((item) => {

  });
})

this.OppurtunityForm.controls['specificationStatus'].
   valueChanges.subscribe((value) => {
    this.autocomplete.options.forEach((item) => {

    });
    
  }
})

Answer 1

您面临的问题似乎与对多个自动完成实例使用相同的

@ViewChild(MatAutocomplete)

参考有关。它们都使用相同的引用，这就是为什么您在任何地方都获得相同的选项值。

以下是修改代码的方法：

@ViewChild('auto') specAutocomplete!: MatAutocomplete;
@ViewChild('autoComp') compAutocomplete!: MatAutocomplete;

this.OppurtunityForm.controls['competitor'].valueChanges.subscribe((value) => {
    this.compAutocomplete.options.forEach((item) => {
        // Your code for the 'competitor' autocomplete
    });
});

this.OppurtunityForm.controls['specificationStatus'].valueChanges.subscribe((value) => {
    this.specAutocomplete.options.forEach((item) => {
        // Your code for the 'specificationStatus' autocomplete
    });
});