Angular Material Chip 不适用于 Angular 版本 7答案

【问题标题】：Angular Material Chip not working with angular version 7Angular Material Chip 不适用于 Angular 版本 7
【发布时间】：2019-02-21 12:26:30
【问题描述】：

Angular Material Chip 不适用于 Angular 版本 7

技术：Angular 版本 7、角度 cli、角度材料。

我想要的结果：我只想用角料芯片模块。

我做过的事情：

我已经安装了“@angular/material”：“^7.3.3”和@angular/animations”：“^7.2.6”，
我已将 NoopAnimationsModule 和 MatChipsModule 导入我的应用模块。

我的应用模块中的导入：

从 '@angular/platform-browser/animations' 导入 { NoopAnimationsModule, BrowserAnimationsModule }；

从“@angular/material/chips”导入 { MatChipsModule }；导入 { MatCommonModule, MatInputModule } from '@angular/material';

那么这是我的组件：

          <mat-form-field>
            <mat-chip-list #chipList>
              <mat-chip>Chip 1</mat-chip>
              <mat-chip>Chip 2</mat-chip>
            </mat-chip-list>
            <input [matChipInputFor]="chipList">
          </mat-form-field>

我得到的错误：

应用程序运行时出现白屏，并且我的代码中出现此消息："mat-chip-list' is not a known element"

我的代码和浏览器的屏幕截图：

【问题讨论】：

请使用stackblitz.com创建一个minimal reproducible example。
您是如何导入 MatChipsModule 的？确保它来自 '@angular/material/chips' 而不是其他地方（由于某种原因，有时会发生角材料）
@Grenther 这些是我的导入： import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';从“@angular/material/chips”导入 { MatChipsModule }；
我在我看到的问题中添加了一个屏幕截图

标签： angular angular-material angular-cli angular7

【解决方案1】：

这是您的导入应该是什么样子的。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { NoopAnimationsModule, BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatChipsModule} from '@angular/material/chips';
import {MatCommonModule, MatInputModule} from '@angular/material';


import { AppComponent } from './app.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule, NoopAnimationsModule, MatChipsModule, BrowserAnimationsModule,MatInputModule,MatCommonModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

这是stackblitz of your code

【讨论】：

谢谢，我已添加您的更改，但仍然出现白屏。这可能与 angular cli 或 angular 7 有关吗？
@AngularM - 检查你的依赖。您还应该拥有@angular/cdk。但是应该与 angular 7 没有冲突，因为这就是我的 stackblitz 并且与 cli 没有冲突。您的角度版本和材料版本必须兼容（如果您想要 7，则两者都是 7）。
@AngularM - 还要检查您的浏览器控制台是否有错误。最后删除 chilist 周围的 html 以确保没有其他东西阻止它被渲染。
我只是 npm i @angular/cdk 因为我没有。我仍然有一个白屏，没有控制台错误。见伊戈尔上方的截图
Igor - 当我从 html 中删除时，我的应用运行良好

【解决方案2】：

在 NgModule 的“导出”中包含 MatChipsModule

import {MatCommonModule, MatInputModule, MatChipsModule} from '@angular/material';

@NgModule({
 imports: [
   ...
 ],
 exports: [
   ...,
   MatChipsModule
 ]
})

【讨论】：