Angular 7+中如何获取Mat-Select选项选中值的选中索引

阿华AIGC实验室

2026-4-28

解决Angular Material mat-select获取选中索引的问题

嘿，我懂你为啥用原生DOM的selectedIndex拿不到值——Angular Material的mat-select是封装过的组件，它渲染出来的DOM结构和原生<select>完全不一样，你通过document.getElementById("selectNow")拿到的只是组件的容器元素，根本不是原生的select标签，所以自然拿不到正确的选中索引。

给你两种靠谱的解决办法：

方法一：利用`*ngFor`的索引直接记录

既然你的选项是用*ngFor循环merged数组生成的，那可以直接在循环里拿到索引，在选中的时候存下来：

模板修改：

<mat-form-field>
  <mat-select 
    id="selectNow" 
    placeholder="{{data?.chatMessage?.labelText}}" 
    (selectionChange)="dropDownActionEvent($event, selected, 'selection_change'); handleSelection($event)" 
    [(value)]="selected">
    <!-- 注意：None选项不在merged数组里，它的索引是0 -->
    <mat-option [value]="undefined">None</mat-option>
    <mat-option 
      *ngFor="let x of merged; let i = index" 
      [value]="x.data"
      (click)="selectedIndex = i + 1"> <!-- 因为前面有个None，所以索引要+1 -->
      {{x.labels}}
    </mat-option>
  </mat-select>
</mat-form-field>

组件逻辑：

在你的组件类里定义一个变量存索引：

selectedIndex: number = 0; // 默认选中None，索引0

handleSelection(event: any) {
  if (event.value === undefined) {
    // 选中了None
    this.selectedIndex = 0;
  } else {
    // 选中了merged里的选项，通过value找到对应的索引，再加1（因为前面有None）
    const mergedIndex = this.merged.findIndex(item => item.data === event.value);
    this.selectedIndex = mergedIndex + 1;
  }
  console.log('当前选中索引：', this.selectedIndex);
}

方法二：通过ViewChild获取MatSelect组件实例

这种方法更贴合Angular的组件化思路，不需要依赖DOM操作：

组件逻辑：

先导入需要的模块，然后通过ViewChild获取mat-select实例：

import { Component, ViewChild } from '@angular/core';
import { MatSelect } from '@angular/material/select';

@Component({
  // 你的组件元数据
})
export class YourComponent {
  @ViewChild('selectRef') selectRef!: MatSelect;
  selectedIndex: number = 0;

  handleSelection() {
    const selectedOption = this.selectRef.selectedOptions.first;
    if (selectedOption) {
      // 获取所有选项的数组，包括None
      const allOptions = this.selectRef.options.toArray();
      this.selectedIndex = allOptions.indexOf(selectedOption);
      console.log('当前选中索引：', this.selectedIndex);
    }
  }
}

模板修改：

给mat-select加一个模板引用变量#selectRef：

<mat-form-field>
  <mat-select 
    #selectRef
    id="selectNow" 
    placeholder="{{data?.chatMessage?.labelText}}" 
    (selectionChange)="dropDownActionEvent($event, selected, 'selection_change'); handleSelection()" 
    [(value)]="selected">
    <mat-option [value]="undefined">None</mat-option>
    <mat-option 
      *ngFor="let x of merged" 
      [value]="x.data">
      {{x.labels}}
    </mat-option>
  </mat-select>
</mat-form-field>