Я посмотрел другие вопросы, но ни один из них не дал результатов.
<mat-form-field>
<mat-select matInput placeholder="Favorite food">
<mat-option *ngFor="let food of foods" [value]="food.value">
{{food.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
Базовый селектор. Я получаю эту ошибку при запуске в браузере.
- Если 'mat-option' является угловым компонентом и имеет вход 'value', то убедитесь, что он является частью этого модуля.
- Если 'mat-option' является веб-компонентом, то добавьте 'CUSTOM_ELEMENTS_SCHEMA' к '@ NgModule.schemas' этого компонента, чтобы подавить это
Посмотрел вокруг, и я импортировал необходимые API.
import { MatFormFieldModule } from '@angular/material/form-field';
import {MatSelectModule} from '@angular/material/select'
У меня также есть много других импортов ковриков
import {
MatInputModule,
MatMenuModule,
MatCardModule,
MatButtonModule,
MatIconModule,
MatToolbarModule,
MatExpansionModule,
} from '@angular/material';
И все же я все еще получаю ошибку. Приложение работает полностью нормально с обычным вводом, таким как:
<mat-form-field>
<mat-label>Address</mat-label>
<input placeholder="eg 221B Baker Street" type="text"
name="Address" ngModel required minlength="5" #title="ngModel">
</mat-form-field>
Занимался этим один день, и это точка, в которой я не могу прогрессировать, не исправляя ее. Любая помощь будет оценена.
Я не смогу ответить, пока не уйду с работы.
еще раз спасибо!
Редактировать: добавление во весь app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { PostDetailsComponent } from './post-details/post- details.component';
import { PostService } from './services/post.service';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterModule, Routes } from '@angular/router';
import { FormsModule } from "@angular/forms";
import {
MatInputModule,
MatMenuModule,
MatCardModule,
MatButtonModule,
MatIconModule,
MatToolbarModule,
MatExpansionModule,
} from '@angular/material';
import { MatFormFieldModule } from '@angular/material';
import {MatSelectModule} from '@angular/material'
import { PostCreateComponent } from './post-create/post-create.component';
import { PostEditComponent } from './post-edit/post-edit.component';
import { PostSigninComponent } from './post-signin/post-signin.component';
import { MembershipTypesComponent } from './membership-types/membership- types.component';
const appRoutes: Routes = [
{
path: 'list',
component: PostDetailsComponent
},
{
path: 'create',
component: PostCreateComponent
},
{
path: 'edit/:id',
component: PostEditComponent
},
{
path: 'membershipTypes',
component: MembershipTypesComponent
}
];
@NgModule({
declarations: [
AppComponent,
PostDetailsComponent,
PostCreateComponent,
PostEditComponent,
PostSigninComponent,
MembershipTypesComponent
],
imports: [
RouterModule.forRoot(appRoutes),
BrowserModule,
FormsModule,
HttpClientModule,
MatIconModule,
MatButtonModule,
BrowserAnimationsModule,
MatInputModule,
MatFormFieldModule,
MatCardModule,
MatButtonModule,
MatToolbarModule,
MatExpansionModule,
MatMenuModule,
],
providers: [PostService],
bootstrap: [AppComponent]
})
export class AppModule { }