Блог

Я пытаюсь использовать компоненты материала в проекте angular, то есть mat-form-field, mat-автозаполнение. Кнопка Material работает нормально, но другие компоненты не работают. Ниже приведены коды и ошибки публикации —

Ошибка —

 <mat-form-field class="example-full-width">
    <!-- #docregion input -->
        <input type="text"
               placeholder="Pick one"
               aria-label="Number"
               matInput
               [matAutocomplete]="auto">
    <!-- #enddocregion input -->
    <!-- #docregion mat-autocomplete -->
        <mat-autocomplete #auto="matAutocomplete">
            <mat-option *ngFor="let category of categoryList" [value]="category">
                {{category}}
              </mat-option>
        </mat-autocomplete>
    <!-- #enddocregion mat-autocomplete -->
</mat-form-field>
  

package.json —->

 "dependencies": {
"@angular/animations": "~10.1.0",
"@angular/cdk": "^10.1.0",
"@angular/common": "~10.1.0",
"@angular/compiler": "~10.1.0",
"@angular/core": "~10.1.0",
"@angular/forms": "~10.1.0",
"@angular/material": "^10.1.0",
"@angular/platform-browser": "~10.1.0",
"@angular/platform-browser-dynamic": "~10.1.0",
"@angular/router": "~10.1.0",
"rxjs": "~6.6.0",
"tslib": "^2.0.1",
"zone.js": "~0.10.2"
}
  

Импортированы почти все предлагаемые модули в app.module.ts —>

 import { MatFormFieldModule, MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatAutocompleteModule} from '@angular/material/autocomplete';
import {MatInputModule} from '@angular/material/input';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import { AppComponent } from './app.component';

imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
ReactiveFormsModule,
MatAutocompleteModule,
MatButtonModule,
MatInputModule,
MatFormFieldModule,
BrowserAnimationsModule
],
providers: [
 { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: {floatLabel: 'auto'}}
],
schemas: [CUSTOM_ELEMENTS_SCHEMA],