angular-material - 如何在垫子自动完成中获取所选项目的索引？

Question

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

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

您可以在 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