autocomplete.options in ts file only gives options from first dropdownlist when there are multiple dropdowns

my application has multiple dropdowns all implemented with mat-autocomplete. i have use unique value for matAutocomplete property also i have different formControlName set. still getting same options value everywhere. please help

here is my code snippet

<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>

In 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) => {

    });
    
  }
})

>Solution :

The issue you are facing seems to be related to using the same @ViewChild(MatAutocomplete) reference for multiple autocomplete instances. they all use the same reference, and that’s why you’re getting the same option value everywhere.

Here’s how you can modify your code:

@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
    });
});