Как я могу использовать MatOptgroup в Angular для реализации автозаполнения?

Question

Я хочу реализовать функцию автозаполнения в соответствии с этим руководством: https://material.angular.io/components/autocomplete/overview

Проблема в том, что Chrome сообщает об ошибке:

Uncaught Error: неожиданная директива 'MatOptgroup', импортированная модулем 'MaterialModule'. Пожалуйста, добавьте аннотацию @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
  ]
})