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

【问题标题】：how to get index of selected item in mat autocomplete?如何在垫子自动完成中获取所选项目的索引？
【发布时间】：2018-12-13 21:39:23
【问题描述】：

是否有任何用于 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>

我要获取选中项的索引。

请帮帮我！

【问题讨论】：

我认为这可行（虽然我还没有尝试过）：尝试通过 getSelectedClient 发送行，如下所示：(optionSelected)=getSelectedClient($event.option, row) 和相应地调整你的功能。
这里的行是什么？？？？
@Santhosh 已添加答案，请检查一次！

标签： angular-material

【解决方案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

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

【讨论】：

我们已经实现了这个，但是在从自动完成框中选择项目后，我不必在输入框中显示索引
@Santhosh 好的，因为 mat-option 上的 value 负责这一点，并且通过事件，唯一的价值是可以实现的。所以像这样的映射` *ngFor="let state of filteredStates | async, let i=index" [value]="state">` 将导致整个state 对象，所以要么在状态对象中保留一个额外的键，这将保持索引。
它不起作用，请在角度材料api中为mat-option提供任何预定义的事件

【解决方案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

【讨论】：