如何在mat-autocomplete的optionSelected事件触发时打开另一个面板？附示例

我来帮你搞定这个需求！要实现当第一个mat-autocomplete的选项被选中时，自动打开第二个mat-autocomplete的面板，咱们可以通过Angular的视图引用和Material组件的API轻松实现，具体步骤如下：

1. 搭建模板结构 #

首先在组件模板中，给两个mat-autocomplete分别设置模板引用变量，同时给第一个绑定optionSelected事件：

<!-- 第一个自动完成组件 -->
<mat-form-field>
  <input 
    type="text" 
    matInput 
    [formControl]="firstControl" 
    [matAutocomplete]="firstAuto"
    placeholder="选择第一个选项"
  >
  <mat-autocomplete 
    #firstAuto="matAutocomplete" 
    (optionSelected)="handleFirstOptionSelect($event)"
  >
    <mat-option *ngFor="let item of firstOptions" [value]="item">
      {{ item }}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

<!-- 第二个自动完成组件 -->
<mat-form-field>
  <input 
    type="text" 
    matInput 
    [formControl]="secondControl" 
    [matAutocomplete]="secondAuto"
    placeholder="第二个选项面板会自动打开"
    #secondInput
  >
  <mat-autocomplete #secondAuto="matAutocomplete" #secondAutocompleteRef="matAutocomplete">
    <mat-option *ngFor="let item of secondOptions" [value]="item">
      {{ item }}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

2. 编写组件逻辑 #

接下来在组件类中，通过ViewChild获取第二个mat-autocomplete的实例，然后在第一个组件的选项选中事件中调用它的open()方法：

import { Component, ViewChild } from '@angular/core';
import { FormControl } from '@angular/forms';
import { MatAutocomplete, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';

@Component({
  selector: 'app-autocomplete-chain',
  templateUrl: './autocomplete-chain.component.html',
  styleUrls: ['./autocomplete-chain.component.css']
})
export class AutocompleteChainComponent {
  firstControl = new FormControl('');
  secondControl = new FormControl('');
  firstOptions: string[] = ['水果', '蔬菜', '肉类'];
  secondOptions: string[] = ['苹果', '香蕉', '橙子'];

  // 获取第二个自动完成组件的实例
  @ViewChild('secondAutocompleteRef') secondAutocomplete!: MatAutocomplete;
  // 获取第二个输入框的引用（可选，用于自动聚焦）
  @ViewChild('secondInput') secondInput!: HTMLInputElement;

  handleFirstOptionSelect(event: MatAutocompleteSelectedEvent) {
    // 可选：根据选中的第一个选项更新第二个选项列表
    if (event.option.value === '水果') {
      this.secondOptions = ['苹果', '香蕉', '橙子'];
    } else if (event.option.value === '蔬菜') {
      this.secondOptions = ['白菜', '萝卜', '黄瓜'];
    } else {
      this.secondOptions = ['牛肉', '猪肉', '鸡肉'];
    }

    // 打开第二个自动完成面板
    this.secondAutocomplete.open();
    // 自动聚焦到第二个输入框，提升用户体验
    setTimeout(() => {
      this.secondInput.focus();
    }, 0);
  }
}

关键细节说明 #

• 视图引用获取实例：通过@ViewChild('secondAutocompleteRef')拿到第二个MatAutocomplete的实例，这样就能调用它内置的open()方法手动触发面板打开。
• 事件触发时机：第一个mat-autocomplete的optionSelected事件会在用户点击或通过键盘选中选项时触发，我们在事件处理函数中执行打开第二个面板的逻辑。
• 体验优化：加入输入框自动聚焦和动态更新选项列表的逻辑，让整个交互流程更连贯自然。

内容的提问来源于stack exchange，提问作者Arunkarthick S R