Angular Material输入框@触发Autocomplete失效问题求助

1. 修正Autocomplete Trigger的获取 #

你没正确获取到MatAutocompleteTrigger实例，这是调用openPanel()无效的核心原因。需要通过@ViewChild结合模板引用获取trigger：

修正后的HTML代码：

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input 
      type="text" 
      placeholder="输入内容，@触发下拉" 
      (keyup)="onKeyup($event)" 
      aria-label="Content" 
      matInput 
      [formControl]="myControl" 
      [matAutocomplete]="auto"
      #inputTrigger="matAutocompleteTrigger"
    >
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let option of options" [value]="option">
        {{option}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

2. 修正组件TS逻辑 #

• 通过@ViewChild绑定模板引用的trigger
• 把事件从keydown改为keyup：keydown触发时输入的@还未同步到input的value中，判断逻辑会失效
• 修复语法错误，同时适配多@场景：

修正后的TS代码：

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

@Component({
  selector: 'app-autocomplete-example',
  templateUrl: './autocomplete-example.component.html',
  styleUrls: ['./autocomplete-example.component.css']
})
export class AutocompleteExampleComponent {
  myControl = new FormControl('');
  options: string[] = ['Option 1', 'Option 2', 'Option 3'];
  
  @ViewChild('inputTrigger') myAutocompleteTrigger!: MatAutocompleteTrigger;

  onKeyup(event: KeyboardEvent) {
    const input = event.target as HTMLInputElement;
    // 直接判断按下的键是否为@
    if (event.key === '@') {
      this.myAutocompleteTrigger.openPanel();
    } else {
      // 可选：非@输入时，若光标前无@则关闭下拉
      const cursorPos = input.selectionStart || 0;
      const prevChar = input.value.charAt(cursorPos - 1);
      if (prevChar !== '@') {
        this.myAutocompleteTrigger.closePanel();
      }
    }
  }
}

3. 关键问题解析 #

• Trigger实例缺失：原代码未通过@ViewChild和模板引用获取MatAutocompleteTrigger，导致openPanel()调用无目标实例
• 事件时机错误：keydown触发时输入字符未写入value，用value.charAt(value.length-1)判断@无效，换成keyup或直接判断event.key更准确
• 语法错误：原代码中inputthis.myAutocompleteTrigger是笔误，需修正为this.myAutocompleteTrigger

4. 多@场景适配 #

上述代码已支持多@场景，比如输入name=@opt1 and city=@时，第二次输入@会再次触发下拉面板，符合需求。

内容的提问来源于stack exchange，提问作者Andyzhou