Question

我想根据本教程实现自动完成功能：https://material.angular.io/components/autocomplete/overview

问题是Chrome报告错误：

未捕获的错误：模块'MaterialModule'导入了意外的指令'MatOptgroup'。请添加@NgModule批注。

我已经声明了NgModule，我现在该怎么办？

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

import {
  MatButtonModule,
  MatFormFieldModule,
  MatInputModule,
  MatRippleModule,
  MatAutocompleteModule,
  MatOptgroup,
  MatOption
} from '@angular/material';

import '@angular/material/prebuilt-themes/deeppurple-amber.css';

@NgModule({
  exports: [
    MatButtonModule,
    MatFormFieldModule,
    MatInputModule,
    MatRippleModule,
    MatAutocompleteModule,
    ReactiveFormsModule,
  ],
  declarations: [],
  imports: [
    MatOptgroup,
    MatOption
  ]
})
export class MaterialModule {}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    MaterialModule,
    BrowserModule,
  ],
  providers: [],
  bootstrap: [
    AppComponent,
  ],
  schemas: [],
})
export class AppModule { }

Answer 1

我想我找到了问题，为什么要导入MatOptgroup和MatOption？

您应该删除这些导入。

@NgModule({
  exports: [
    ...
  ],
  declarations: [],
  imports: [
    MatOptgroup, // <----- remove this
    MatOption    // <----- remove this
  ]
})

如何在Angular中使用MatOptgroup来实现自动完成功能？

1 个答案: