Question

我正在构建一个简单的应用程序，它可以使用材料2渲染一些芯片但是我的工作没有任何效果，这里是相同的代码：组件 - （注意 - 我在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 Module-（我需要使用输入来实现芯片，这些输入会过滤掉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
  ]
})

角度材料设计芯片无法正常工作

1 个答案: