如何在Angular的<mat-menu>中实现搜索过滤功能？

完全可行，通过Angular的双向数据绑定结合数组过滤就能实现这个需求，下面是具体实现步骤：

1. 修改模板代码 #

在<mat-menu>内部最顶部添加搜索输入框，同时将原来遍历的services替换为过滤后的数组，输入关键词时就能实时筛选菜单选项：

<mat-menu #menu="matMenu">
  <!-- 搜索栏 -->
  <div class="menu-search">
    <mat-form-field appearance="fill" class="w-full">
      <input matInput placeholder="搜索服务" [(ngModel)]="searchTerm" />
    </mat-form-field>
  </div>

  <!-- 过滤后的菜单选项 -->
  <div *ngFor="let id of filteredServices">
    <button mat-menu-item (click)="doSomething(id)">
      {{ id }}
    </button>
  </div>
</mat-menu>

2. 组件逻辑实现 #

在组件类中定义搜索关键词变量，通过getter属性实时计算过滤后的服务列表，同时保留原逻辑中排除service_id的判断：

import { Component } from '@angular/core';

@Component({
  // 组件元数据（根据你的实际情况填写）
})
export class YourComponent {
  services: string[] = ['服务A', '服务B', '服务C', '服务D']; // 示例数据
  service_id: string = '服务B'; // 示例排除项
  searchTerm: string = '';

  // 实时过滤的服务列表
  get filteredServices(): string[] {
    let filtered = this.services.filter(id => id !== this.service_id);
    
    if (this.searchTerm) {
      const lowerTerm = this.searchTerm.toLowerCase();
      filtered = filtered.filter(id => id.toLowerCase().includes(lowerTerm));
    }
    
    return filtered;
  }

  doSomething(id: string): void {
    // 你的业务逻辑
    console.log('选中服务:', id);
  }
}

3. 可选样式优化 #

默认的mat-menu高度有限，添加搜索栏后可能会出现内容溢出，建议添加以下样式让菜单支持滚动：

.menu-search {
  padding: 8px;
}

.mat-menu-content {
  max-height: 300px;
  overflow-y: auto;
}

.w-full {
  width: 100%;
}

补充说明 #

• 双向绑定[(ngModel)]需要确保你的模块已经导入了FormsModule
• 过滤逻辑加入了大小写不敏感的判断，提升用户体验
• 如果服务列表是异步获取的（比如从API请求），只需要确保services变量在数据返回后更新即可，过滤逻辑会自动生效

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