Angular 角度材料芯片不适用于角度版本7

角度材料芯片不适用于角度版本7

技术：角度版本7，角度cli，角度材质

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

我做过的事情：

          <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>

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

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

            <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>
  

  从“@angular/platform browser/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>

芯片1
芯片2

我得到的错误：

应用程序运行时出现白色屏幕，我的代码中显示此消息：“mat芯片列表”不是已知元素“

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

---

以下是您的导入内容应该是什么样子的

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 { }

---

这是一个将MatChipsModule包含在NgModule的“导出”中的

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

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

---

请创建一个使用。您是如何导入MatChipsModule的？请确保它来自“@angular/material/chips”，而不是其他地方（由于某些原因，angular material有时会发生这种情况）@Grenther这些是我的导入：从“@angular/platform browser/animations”导入{BrowserAnimationsModule，NoopAnimationsModule}；导入{MatChipsModule}在“@angular/material/chips”中，我在我看到的问题中添加了一个屏幕截图。谢谢，我添加了您的更改，但仍然得到了一个白色屏幕。这可能与angular cli或angular 7有关吗？@AngularM-检查您的依赖关系。您还应该有

@angular/cdk

。但与angular 7一样，应该没有冲突t是我的stackblitz，也与cli没有冲突。你的角度版本和材质版本必须兼容（如果你想要7，两者都是7）.@AngularM-还要检查你的浏览器控制台是否有错误。最后删除chilist周围的html，以确保没有其他东西阻止它被呈现。我只有npm I@angular/cdk，因为我没有。我仍然有一个白色屏幕，没有控制台错误。请参阅上面的屏幕截图Igorigo-当我从html中删除时，我的应用程序运行良好