Mat-Chip-Grid类型不兼容错误：疑[matChipInputFor]绑定有误

错误提示：Mat-Chip-Grid is not assignable to Mat-Chip-Grid and Mat-Legacy-Chip-List，问题大概率出在[matChipInputFor]="chipGrid"这个绑定上，相关代码如下：

<mat-chip-grid #chipGrid aria-label="Enter fruits">
  <mat-chip-row *ngFor="let lang of languages"
                (removed)="remove(lang)"
                [editable]="true"
                (edited)="edit(lang, $event)"
                [aria-description]="'press enter to edit ' + lang.name">
    {{lang.name}}
    <button matChipRemove [attr.aria-label]="'remove ' + lang.name">
      <mat-icon>cancel</mat-icon>
    </button>
  </mat-chip-row>
  <input placeholder="New Lang..."
         [matChipInputFor]="chipGrid"
         [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
         [matChipInputAddOnBlur]="addOnBlur"
         (matChipInputTokenEnd)="add($event)"/>
</mat-chip-grid>
</mat-form-field>

问题原因 #

这个错误本质是Angular Material新旧组件体系混用导致的：mat-chip-grid是基于MDC的新版芯片组件，但项目中可能导入了旧版（Legacy）的芯片指令，导致matChipInputFor的类型和mat-chip-grid不匹配。

解决步骤 #

• 检查并修正导入语句
  确保在模块中导入的是新版的芯片模块，而非旧版Legacy模块：

  // 正确导入
  import { MatChipsModule } from '@angular/material/chips';
  

  同时移除旧版的导入：

  // 要删除的旧版导入
  // import { MatLegacyChipsModule } from '@angular/material/legacy-chips';
  

• 清理重复导入
  如果项目中同时存在新旧模块的导入，必须完全移除Legacy版本的相关代码，保证全项目统一使用新版组件体系。

• 重新编译验证
  修改完成后重新编译项目，类型不兼容的错误应该会自动消失。

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