如何获取垫自动完成中所选项目的索引？

Question

是否有用于mat-autocomplete的mat-option事件。

下面的HTML代码：

Edittext

我想获取所选项目的索引。

请帮助我！

Answer 1

Demo with option's index selected

您必须将索引变量的值
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

如果不是必需的情况，请发表评论。

Answer 2

您可以在Mat-Option上使用click事件

将您的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
}

A Working StackBlitz Example