Angular Material中Mat-Chips组件报错：Property 'chipInput' does not exist on type 'MatChipInputEvent'

这个错误的核心原因是Angular Material版本迭代后，MatChipInputEvent的属性名发生了变更——在较新的版本（比如v15及之后）里，原有的chipInput属性被重命名为input了，所以你的代码里调用event.chipInput才会触发类型错误。

快速修复方案 #

直接修改你Component.ts里的add方法，把event.chipInput!.clear();替换为event.input!.clear();：

add(event: MatChipInputEvent): void {
  const value = (event.value || '').trim();
  // Add our fruit
  if (value) {
    this.fruits.push(value);
  }
  // Clear the input value - 这里是修改的部分
  event.input!.clear();
  this.fruitCtrl.setValue(null);
}

额外检查：确保模块导入完整 #

虽然你提到已经导入了对应模块，但为了保险起见，确认你的主模块（或Feature模块）里已经导入了以下依赖：

• MatChipsModule
• MatFormFieldModule
• MatInputModule
• MatAutocompleteModule
• MatIconModule
• ReactiveFormsModule（因为用到了FormControl）

模块导入示例：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import { MatChipsModule } from '@angular/material/chips';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatIconModule } from '@angular/material/icon';

@NgModule({
  imports: [
    CommonModule,
    ReactiveFormsModule,
    MatChipsModule,
    MatFormFieldModule,
    MatInputModule,
    MatAutocompleteModule,
    MatIconModule
  ],
  declarations: [/* 你的组件 */]
})
export class YourModule { }

为什么会出现这个问题？ #

Angular Material在v15版本对部分组件的API做了精简和标准化，其中就包括MatChipInputEvent的属性调整，将chipInput统一改为input，目的是让事件对象的命名更直观一致。如果你的项目是从旧版本升级过来的，就容易遇到这类属性名不匹配的问题。

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