请求协助为Angular Material的mat-select组件实现搜索筛选功能

没问题，我来帮你给mat-select加上搜索筛选功能！咱们可以通过在下拉面板里添加一个输入框，结合组件内的过滤逻辑来实现，下面是具体的实现步骤和修改后的代码：

第一步：修改HTML模板 #

我们需要在mat-select的下拉面板中添加一个搜索输入框，同时把原来遍历dept数组改成遍历过滤后的数组：

<table> 
  <tr>
    <td> Department</td> 
    <td> 
      <mat-form-field> 
        <mat-select placeholder="Select Department">
          <!-- 搜索输入框 -->
          <mat-option>
            <input matInput placeholder="Search Department" (keyup)="filterDepartments($event.target.value)" style="width: 100%;">
          </mat-option>
          <!-- 过滤后的部门选项 -->
          <mat-option *ngFor="let dep of filteredDept" [value]="dep">{{dep}}</mat-option>
        </mat-select> 
      </mat-form-field><br/>
    </td> 
  </tr> 
</table> 
<br><br> 
<button >Search</button> 
<button >Reset</button> 
<button >Close</button> 
<mat-card> 
  <div class="example-container mat-elevation-z8"> 
    <mat-table #table [dataSource]="dataSource"> 
      <!-- Account No. Column --> 
      <ng-container matColumnDef="accno"> 
        <mat-header-cell *matHeaderCellDef> Account No. </mat-header-cell> 
        <mat-cell *matCellDef="let element"> {{element.accno}} </mat-cell> 
      </ng-container> 
      <!-- Account Description Column --> 
      <ng-container matColumnDef="accdesc"> 
        <mat-header-cell *matHeaderCellDef> Account Description </mat-header-cell> 
        <mat-cell *matCellDef="let element"> {{element.accdesc}} </mat-cell> 
      </ng-container> 
      <!-- Investigator Column --> 
      <ng-container matColumnDef="investigator"> 
        <mat-header-cell *matHeaderCellDef> Investigator </mat-header-cell> 
        <mat-cell *matCellDef="let element"> {{element.investigator}} </mat-cell> 
      </ng-container> 
      <!-- Account CPC Column --> 
      <ng-container matColumnDef="accCPC"> 
        <mat-header-cell *matHeaderCellDef> Account CPC </mat-header-cell> 
        <mat-cell *matCellDef="let element"> {{element.accCPC}} </mat-cell> 
      </ng-container> 
      <!-- Location Column --> 
      <ng-container matColumnDef="location"> 
        <mat-header-cell *matHeaderCellDef> Location </mat-header-cell> 
        <mat-cell *matCellDef="let element"> {{element.location}} </mat-cell> 
      </ng-container> 
      <!-- Client Dept ID Column --> 
      <ng-container matColumnDef="cdeptid"> 
        <mat-header-cell *matHeaderCellDef> ClientDeptID </mat-header-cell> 
        <mat-cell *matCellDef="let element"> {{element.cdeptid}} </mat-cell> 
      </ng-container> 
      <!-- Dept Description Column --> 
      <ng-container matColumnDef="depdesc"> 
        <mat-header-cell *matHeaderCellDef> Dept Description </mat-header-cell> 
        <mat-cell *matCellDef="let element"> {{element.depdesc}} </mat-cell> 
      </ng-container> 
      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row> 
      <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row> 
    </mat-table> 
    <mat-paginator #paginator [pageSize]="10" [pageSizeOptions]="[5, 10, 20]"> 
    </mat-paginator> 
  </div> 
</mat-card>

第二步：修改组件TS文件 #

我们需要添加一个用于存储过滤后部门的数组，以及实现过滤逻辑的方法，同时初始化这个数组：

import {Component, ViewChild, OnInit} from '@angular/core'; 
import {MatPaginator, MatTableDataSource} from '@angular/material'; 

@Component({ 
  selector: 'app-account', 
  templateUrl: './account.component.html', 
  styleUrls: ['./account.component.scss'] 
}) 
export class AccountComponent implements OnInit { 
  dept = [ 
    'Administrative Computer', 
    'Agosta Laboratory', 
    'Allis Laboratory', 
    'Bargaman Laboratory', 
    'Bio-Imaging Resource Center', 
    'Capital Projects', 
    'Casanova Laboratory', 
    'Darst Laboratory', 
    'Darnell James Laboratory', 
    'Deans Office', 
    'Energy Consultant', 
    'Electronic Shop', 
    'Facilities Management', 
    'Field Laboratory' 
  ];
  // 新增：存储过滤后的部门列表
  filteredDept: string[];
  displayedColumns = ['accno', 'accdesc', 'investigator', 'accCPC','location','cdeptid','depdesc']; 
  dataSource = new MatTableDataSource<Element>(ELEMENT_DATA); 
  @ViewChild(MatPaginator) paginator: MatPaginator; 

  ngOnInit() {
    // 初始化过滤数组为原始部门列表的副本
    this.filteredDept = [...this.dept];
  }

  ngAfterViewInit() { 
    this.dataSource.paginator = this.paginator; 
  }

  // 新增：过滤部门的方法
  filterDepartments(searchTerm: string) {
    // 如果搜索框为空，恢复原始列表
    if (!searchTerm) {
      this.filteredDept = [...this.dept];
      return;
    }
    // 不区分大小写过滤部门名称
    const lowerCaseTerm = searchTerm.toLowerCase();
    this.filteredDept = this.dept.filter(department => 
      department.toLowerCase().includes(lowerCaseTerm)
    );
  }
} 

export interface Element { 
  accno: number; 
  accdesc: string; 
  investigator: string; 
  accCPC: string; 
  location:string; 
  cdeptid: number; 
  depdesc: string; 
} 

const ELEMENT_DATA: Element[] = [ 
  {accno: 5400343, accdesc: 'ASTRALIS LTD', investigator:'Kruger, James G.', accCPC: 'OR',location:'ON',cdeptid: 110350,depdesc: 'Kruger Laboratory'} 
]; 

关键点说明 #

• 我们在mat-select里添加了一个带keyup事件的输入框，每次输入都会触发filterDepartments方法更新过滤后的部门列表
• 使用[...this.dept]深拷贝原始数组，避免修改原始数据
• 过滤逻辑忽略大小写，提升用户体验
• 给搜索输入框加了style="width: 100%;"让它占满下拉面板的宽度，看起来更美观

这样修改后，你的mat-select就支持输入搜索筛选选项啦！

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