Ошибки с,Нормальный ввод работает нормально, но не могу использовать mat-select без ошибки - PullRequest
0 голосов
/ 17 ноября 2018

Я посмотрел другие вопросы, но ни один из них не дал результатов.

<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>

Базовый селектор. Я получаю эту ошибку при запуске в браузере.

  1. Если 'mat-option' является угловым компонентом и имеет вход 'value', то убедитесь, что он является частью этого модуля.
  2. Если '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 { }

Ответы [ 2 ]

0 голосов
/ 18 ноября 2018

Вам необходимо добавить MatSelectModule в массив imports, например:

imports: [
    RouterModule.forRoot(appRoutes),
    BrowserModule,
    FormsModule,
    HttpClientModule,
    MatIconModule,
    MatButtonModule,
    BrowserAnimationsModule,
    MatInputModule,
    MatFormFieldModule,
    MatCardModule,
    MatButtonModule,
    MatToolbarModule,
    MatExpansionModule,
    MatMenuModule,
    MatSelectModule
  ],
0 голосов
/ 17 ноября 2018

вы импортируете MatSelectModule неправильно, просто попробуйте:

import {MatSelectModule} from '@angular/material'
...