Angular Material Chip不适用于Angular版本7

Question

Angular Material Chip不适用于Angle版本7

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

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

我所做的事情：

• 我已经安装了“ @ angular / material”：“ ^ 7.3.3”和@ angular / animations：“ ^ 7.2.6”，

• 我已将NoopAnimationsModule和MatChipsModule导入到我的应用程序模块中。

  我在应用模块中的导入：

  从“ @ angular / platform-b​​rowser / animations”导入{NoopAnimationsModule，BrowserAnimationsModule};

  从'@ angular / material / chips'导入{MatChipsModule}; 从'@ angular / material'导入{MatCommonModule，MatInputModule};

然后这是我的组件：

          <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”不是已知元素”

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

Answer 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

Answer 2

在您的NgModule的“导出”中包含MatChipsModule

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

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