'mat-chip-list' 不是一个已知元素

Question

我正在尝试在一个组件中使用 mat-chip。在我升级到 Angular 15 之前，我的代码是可以工作的。

我已经导入了该模块，这似乎是一个常见的错误。

我认为我根据文档已经包含了所有必要的内容。

非常感谢您的帮助。谢谢！

错误信息如下：

Error: src/app/app.component.html:1:1 - error NG8001: 'mat-chip-list' is not a known element:
1. If 'mat-chip-list' is an Angular component, then verify that it is part of this module.
2. If 'mat-chip-list' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

1 <mat-chip-list>
  ~~~~~~~~~~~~~~~

  src/app/app.component.ts:5:16
    5   templateUrl: './app.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.

版本信息如下：

Angular CLI: 15.0.0-rc.3
Node: 16.14.0
Package Manager: npm 9.1.1
OS: linux x64

Angular: 15.0.0-rc.3
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1500.0-rc.3
@angular-devkit/build-angular   15.0.0-rc.3
@angular-devkit/core            15.0.0-rc.3
@angular-devkit/schematics      15.0.0-rc.3
@angular/cdk                    15.0.0-rc.2
@angular/material               15.0.0-rc.2
@schematics/angular             15.0.0-rc.3
rxjs                            7.5.7
typescript                      4.8.4

我的 app.modules.ts 文件：

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

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


@NgModule({
    declarations: [
       AppComponent
    ],
    imports: [
       MatChipsModule
    ],
    exports: [
    ],
    providers: [
    ],
    bootstrap: [AppComponent],
       entryComponents: [ 
    ]

})
export class AppModule` { }

我的组件：

`<mat-chip-list>
    <mat-chip>
        Dog one
    </mat-chip>
    <mat-chip color="primary">
       Dog two
    </mat-chip>
    <mat-chip color="accent">
       Dog three
    </mat-chip>
</mat-chip-list>`

和 component.ts：

   import { Component } from '@angular/core';

   @Component({
      selector: 'chips-example',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css'],
  })
  export class AppComponent
  {
  }

- Ian

---

在你的 app.modules.ts 文件中，当你导出 MatChipsModule 时会发生什么？ - Ali Celebi

在你的 imports 中是否也包括了 import { BrowserModule } from "@angular/platform-browser"; 中的 BrowserModule？并且重新启动服务器？ - W.S.

无论是添加MatChipsModule还是添加BrowserModule都没有帮助。 - Ian

我已将Angular和Material从15降级到14。上述测试用例现在可以正常工作。 - Ian

Answer 1

Angular Material v15切换到基于MDC的组件，这些组件有一些破坏性变化。有一个迁移指南，其中说明<mat-chip-list>组件已被删除，并替换为三个替代组件：

1. 当用户可以选择芯片时，应使用<mat-chip-listbox>和<mat-chip-option>
2. 当文本输入与芯片交互时，应使用<mat-chip-grid>和<mat-chip-row>
3. 当您实现自定义可访问性模式时，应使用<mat-chip-set>和<mat-chip>

或者，您可以通过导入MatLegacyChipsModule在v15和v16中使用“旧”芯片实现。但是，这种方法已被弃用，并将在Angular v17中删除。

- JSON Derulo

Answer 2

或者，您可以尝试使用mat-chip-grid和mat-chip-row。这解决了我的问题。

https://material.angular.io/components/chips/overview#text-entry

- ZC_

---

虽然这个链接可能会回答问题，但最好在此处包含答案的必要部分并提供参考链接。如果链接页面发生更改，则链接仅回答无效。-【来自评论】 - ahuemmer

Answer 3

尝试在您的导入数组中包含BrowserModule和BrowserAnimationsModule，并在顶部定义导入。例如，import { BrowserModule } from '@angular/platform-browser' 和 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

- E.Anthony