как получить индекс выбранного элемента в автозаполнении мат?

Question

Есть ли какие-либо события для mat-option, который используется для mat-autocomplete.

HTML-код ниже:

<mat-form-field>
    <input type="text" placeholder="Search......." aria-label="Number" style="text-transform: uppercase"
    matInput formControlName="myControl" [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete" autoActiveFirstOption (optionSelected)=getSelectedClient($event.option);>
        <mat-option *ngFor="let option of displayList; let i = index" [value]="option">
            {{option}}
        </mat-option>
    </mat-autocomplete>
</mat-form-field>

Я хочу получить индекс выбранного элемента.

пожалуйста, помогите мне!

Answer 1

Вы можете использовать click событие в Mat-Option

Заменить mat-option на:

<mat-option (click)="onSelect(option,i)" *ngFor="let option of displayList; let i = index" [value]="option">
    {{option}}
</mat-option>

в файле TS:

onSelect(value,index) {
  console.log('value --> ',value) // Value
  console.log('index --> ',index) // Index that you need
}

Пример с рабочим стеком

Answer 2

Демонстрация с выбранным индексом опции

Необходимо сопоставить значение переменной индекса
let i = index со значением опции вautocomplete компонент.

<mat-autocomplete #auto="matAutocomplete" 
autoActiveFirstOption 
(optionSelected)="selectedOption($event)">
            <mat-option *ngFor="let option of displayList; let i = index" [value]="i">
                    {{option}}
            </mat-option>
</mat-autocomplete>

В файле компонента:

selectedOption(event) {
   const selectedValue = event.option.value;
   console.log(selectedValue);
}

Демонстрационный код приложения:
https://stackblitz.com/edit/angular-material-autocomplete-index-select?file=app/autocomplete-overview-example.html

Пожалуйста, прокомментируйте, если это не обязательный случай.