Angular Material 设计芯片不起作用

Question

我正在构建一个简单的应用程序，该应用程序将使用材料 2 渲染一些芯片，但最终没有任何效果，这是相同的代码： 组件-（注意-我在应用程序组件中调用此组件，但仍然没有渲染）

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
  ]
})