角材料设计芯片不工作

Question

我正在构建一个简单的应用程序，它可以使用材料2渲染一些芯片，但是在我的终端没有什么工作，下面是相同的代码: Component- (注意-我在app组件中调用了这个组件，但仍然没有渲染)

import { Component, OnInit } from '@angular/core';
import { MatChipInputEvent } from '@angular/material';
import {ENTER, COMMA} from '@angular/cdk/keycodes';

@Component({
  selector: 'app-mat-chip-list',
  templateUrl: './mat-chip-list.component.html',
  styleUrls: ['./mat-chip-list.component.css']
})
export class MatChipListComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

HTMl文件-

 <mat-chip-list>
      <mat-chip>One fish</mat-chip>
      <mat-chip>Two fish</mat-chip>
      <mat-chip color="primary" selected="true">Primary fish</mat-chip>
      <mat-chip color="accent" selected="true">Accent fish</mat-chip>
    </mat-chip-list>

App模块-(我需要使用输入实现芯片，以过滤掉ag网格中的数据。)但目前没有任何东西在渲染。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {HttpModule} from '@angular/http';
import { HttpClientModule } from '@angular/common/http';
import {AgGridModule} from "ag-grid-angular";
import { AppComponent } from './app.component';
import { HeaderContentComponent } from './header-content/header-content.component';
import { PageNavigationComponent } from './page-navigation/page-navigation.component';
import { FundsFilterSectionComponent } from './funds-filter-section/funds-filter-section.component';
import { DistributionAnalyzedReturnComponent } from './distribution-analyzed-return/distribution-analyzed-return.component';
import { FundsTableComponent } from './funds-table/funds-table.component';
import { FormsModule, ReactiveFormsModule } from "@angular/forms"; // <-- NgModel lives here
// HttpClient
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import { MatChipListComponent } from './mat-chip-list/mat-chip-list.component';
import { MatChipInputEvent } from '@angular/material';
import {CdkTableModule} from '@angular/cdk/table';

import {
  MatAutocompleteModule,
  MatButtonModule,
  .....
  MatToolbarModule,
  MatTooltipModule
} from '@angular/material';


@NgModule({
  exports: [
    CdkTableModule,
    MatAutocompleteModule,
  MatButtonModule,
  .....
  MatToolbarModule,
  MatTooltipModule
  ]
})

@NgModule({
  declarations: [
    AppComponent,
    HeaderContentComponent,
    PageNavigationComponent,
    FundsFilterSectionComponent,
    DistributionAnalyzedReturnComponent,
    FundsTableComponent,
    MatChipListComponent
  ],
  imports: [
    BrowserModule,  BrowserAnimationsModule,  FormsModule, HttpClientModule, AgGridModule.withComponents([])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

您能告诉我我在代码中犯了什么错误吗?我试着按照material.angular.io上的正确指南进行操作，但仍然没有显示任何内容。

Answer 1

我怀疑这个问题来自于定义@NgModule两次的事实。删除第一个：

@NgModule({
  exports: [
    CdkTableModule,
    MatAutocompleteModule,
  MatButtonModule,
  .....
  MatToolbarModule,
  MatTooltipModule
  ]
})