如何将Angular 5带过滤的Material表格整合到Angular 18项目并修复keyup问题

1. 修复keyup事件绑定报错 #

Angular 18模板事件绑定语法和旧版本基本一致，但独立组件模式下需确保模块导入完整，同时优化事件处理避免类型报错：

• 替换原(keyup)="applyFilter($event.target.value)"写法，改用双向绑定配合ngModelChange，更符合新版本类型规范：

  <input matInput placeholder="Filter" [(ngModel)]="filterValue" (ngModelChange)="applyFilter($event)">
  

• 组件类中定义对应变量并简化过滤方法：

  filterValue: string = '';
  
  applyFilter(filter: string) {
    this.dataSource.filter = filter.trim().toLowerCase();
  }
  

2. 适配Angular Material表格API变化 #

从Angular 5到18，Material表格核心逻辑不变但模块导入方式和细节有调整：

• 独立组件需直接导入所需Material模块到组件的imports数组：

  import { Component, OnInit } from '@angular/core';
  import { MatTableDataSource } from '@angular/material/table';
  import { MatTableModule } from '@angular/material/table';
  import { MatInputModule } from '@angular/material/input';
  import { FormsModule } from '@angular/forms';
  
  @Component({
    selector: 'app-filter-table',
    standalone: true,
    imports: [MatTableModule, MatInputModule, FormsModule],
    templateUrl: './filter-table.component.html'
  })
  export class FilterTableComponent implements OnInit {
    dataSource = new MatTableDataSource<YourDataType>(yourDataList);
    displayedColumns = ['id', 'name', 'email'];
    filterValue: string = '';
  
    ngOnInit() {
      // 可选：自定义过滤规则，适配多字段匹配
      this.dataSource.filterPredicate = (data, filter) => {
        return data.name.toLowerCase().includes(filter) 
          || data.email.toLowerCase().includes(filter);
      };
    }
  
    applyFilter(filter: string) {
      this.dataSource.filter = filter.trim().toLowerCase();
    }
  }
  

• 模板中表格标签推荐用table mat-table替代旧版mat-table，列定义用法保持一致：

  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef> ID </th>
      <td mat-cell *matCellDef="let element"> {{element.id}} </td>
    </ng-container>
  
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
  

3. 独立组件额外注意事项 #

• 所有用到的Material模块（如MatFormFieldModule若用输入框包裹）必须直接导入到组件imports，无需在NgModule中声明。
• 若需通过ViewChild获取表格实例，使用新版本语法：

  import { ViewChild } from '@angular/core';
  import { MatTable } from '@angular/material/table';
  
  @ViewChild(MatTable) table!: MatTable<YourDataType>;
  
  // 过滤后手动刷新表格（新版本多数场景无需此操作）
  applyFilter(filter: string) {
    this.dataSource.filter = filter.trim().toLowerCase();
    this.table.renderRows();
  }
  

4. 常见报错排查 #

• 出现Can't bind to 'ngModel' since it isn't a known property of 'input'：确认已导入FormsModule到组件imports。
• 出现'mat-input' is not a known element：确认导入MatInputModule和MatFormFieldModule（若用mat-form-field包裹输入框）。

内容的提问来源于stack exchange，提问作者J.Olufsen