“mat-chip-list”不是已知元素：- TypeScript

如果你在开发Angular应用时遇到一个报错：“‘mat-chip-list’不是已知元素：”，那么这篇文章就是为你准备的。

问题背景

在使用Angular Material中的mat-chips组件时，你可能会遇到一个问题：在声明了mat-chip-list标签后，会有一个TS编译错误提示：“‘mat-chip-list’不是已知元素：”。

举个例子，你的HTML代码可能如下所示：

<mat-chip-list>
  <mat-chip>One fish</mat-chip>
  <mat-chip>Two fish</mat-chip>
  <mat-chip>Red fish</mat-chip>
  <mat-chip>Blue fish</mat-chip>
</mat-chip-list>

解决方案

1. 导入所需模块

首先，你需要确认你已经正确导入了mat-chips模块。这个模块包含了一个mat-chip-list组件，如果你没有正确导入它，那么Angular就无法识别你添加的mat-chip-list标签。

在导入时注意到，mat-chips模块与Angular Material的其他组件位于不同的npm包中。确保你已经导入了正确的包，否则也会出现错误。

import { MatChipsModule } from '@angular/material/chips';

@NgModule({
  imports: [ MatChipsModule ],
  ...
})
export class AppModule () {}

2. 解决名字空间冲突

其次，你需要确保你没有出现名字空间冲突。如果你在你的组件或指令中使用了mat-chip-list作为一个局部变量或属性，它可能会与Angular Material的mat-chips组件冲突。

<!-- 在这里会出现一个冲突 -->
<mat-chip-list #matChipList>
  <mat-chip>One fish</mat-chip>
  <mat-chip>Two fish</mat-chip>
  <mat-chip>Red fish</mat-chip>
  <mat-chip>Blue fish</mat-chip>
</mat-chip-list>

为避免冲突，你可以考虑重命名你的变量或属性：

<mat-chip-list #customChipList>
  <mat-chip>One fish</mat-chip>
  <mat-chip>Two fish</mat-chip>
  <mat-chip>Red fish</mat-chip>
  <mat-chip>Blue fish</mat-chip>
</mat-chip-list>

3. 确认版本号

最后，你需要确认你正在使用正确的版本号。如果你使用的是一个过时的版本，那么可能会导致Angular认为你的mat-chip-list组件并不存在。

你可以通过在你的package.json中查看你的Angular Material版本号来确认这一点。

{
  "dependencies": {
    "@angular/material": "^10.0.0",
    ...
  }
}

确保你的版本是最新的，或符合所需版本。

结论

如果你在使用Angular Material时遇到了“‘mat-chip-list’不是已知元素”错误，那么你需要确保你已经正确导入了mat-chips模块，避免名字空间冲突，以及确认你正在使用正确的版本号。如果你按照上述步骤操作，那么你的应用程序应该能够成功编译并正常运行。