각도 재료 구성 요소가 작동하지 않음: 'mat-option'은(는) 알려진 요소가 아닙니다.

각도 재료 구성 요소가 작동하지 않음: 'mat-option'은(는) 알려진 요소가 아닙니다.

각진 재료 구성요소를 추가하려고 하는데 구성요소가 제대로 작동하지 않았습니다. 오류가 발생했습니다.

Uncaught Error: Template parse errors: 'mat-option' is not a known element:
// ...

제 생각에 그 오류는app.module.ts:

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SidebarComponent } from './sidebar/sidebar.component';
import { PostsComponent } from './posts/posts.component';
import { UsersComponent } from './users/users.component';
import { DetailsComponent } from './details/details.component';
import { HttpClientModule } from '@angular/common/http';
import { FooterComponent } from './footer/footer.component'; 
import {MatButtonModule, MatCheckboxModule} from '@angular/material';
import {MatFormFieldModule} from '@angular/material/form-field';
import { MyFormComponent } from './my-form/my-form.component';
@NgModule({
  declarations: [
    AppComponent,
    SidebarComponent,
    PostsComponent,
    UsersComponent,
    DetailsComponent,
    FooterComponent, MyFormComponent
  ],
  imports: [
    BrowserModule, AppRoutingModule,HttpClientModule,MatButtonModule, MatCheckboxModule,MatFormFieldModule
  ]
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

가져올 필요가 있습니다.MatSelectModule원인mat-option이 모듈 내에서 선언되고 이를 에 추가합니다.AppModule수입품

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

@NgModule({
   imports: [ ..., MatSelectModule, ...]
})
export class AppModule { }

가져오기를 수행해야 합니다.

imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MaterialModule,
    MatSelectModule,
    //..Other modules here
],

사실 당신은 또한 추가해야 합니다.MatOptionModule뿐만 아니라.MatSelectModule.

imports: [
  ...
  MatSelectModule,
  MatOptionModule,
  ...
],

그렇지 않으면 설정 시 문제가 발생할 수 있습니다.value당신의mat-option.

사용자가 제시한 답이 하나도 안 맞는 게 신기한데, 어떻게 알았나요?저 혼자서도 같은 문제에 직면했기 때문입니다.

솔루션은 '@angular/material/select'에서 {MatSelectModule} 가져오기입니다.

가져오기 MatSelectModule에 기록합니다.

AppModule.ts에서 MatSelectModule을 가져와야 합니다.

import {MatButtonModule, MatCheckboxModule, MatSelectModule} from '@angular/material';

imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    MatButtonModule,
    MatCheckboxModule,
    MatFormFieldModule,
    MatSelectModule
  ]

대부분의 사용자는 "shared.module.ts"에 추가하는 사용자 지정 구성 요소를 만들 수 있습니다. 이 경우 사용자 지정 구성 요소 자체로 가져올 항목에 주의해야 합니다.

사용자 지정 선택.vmdk.ts

import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { MatInputModule } from '@angular/material/input';
import { CustomSelectComponent } from './custom-select.component';
import { MatSelectModule } from '@angular/material/select';

@NgModule({
  declarations: [CustomSelectComponent],
  imports: [CommonModule, MatSelectModule, FormsModule],
  exports: [CustomSelectComponent, MatInputModule],
})
export class CustomSelectModule {}

shared.vmdk.ts

import { NgModule } from '@angular/core';
import { CustomSelectModule } from './components/customSelect/custom-select.module';
import { DatePipe } from './pipes/date.pipe';

@NgModule({
  declarations: [
    ...
  ]
  imports: [
    ...
    
    M̶a̶t̶S̶e̶l̶e̶c̶t̶M̶o̶d̶u̶l̶e̶,̶,
    CustomSelectModule,
    ...
  ],
  exports: [
    ...
    M̶a̶t̶S̶e̶l̶e̶c̶t̶M̶o̶d̶u̶l̶e̶,
    CustomSelectModule,
    ...
  ],
})
export class SharedModule {}

언급URL : https://stackoverflow.com/questions/52052895/angular-material-component-not-working-mat-option-is-not-a-known-element