Angular 6 错误显示 <mat-panel-title> 不是已知元素

Question

我正在尝试在 Angular 6 项目中使用 Angular Material 但出现错误

1. 'mat-panel-title' 不是已知元素：
2. 'mat-panel-description' 不是已知元素：
3. 'mat-expansion-panel-header' 不是已知元素：
4. 'mat-form-field' 不是已知元素：
5. 'mat-expansion-panel' 不是已知元素：

这是代码

<mat-accordion>
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Personal data
      </mat-panel-title>
      <mat-panel-description>
        Type your name and age
      </mat-panel-description>
    </mat-expansion-panel-header>

    <mat-form-field>
      <input matInput placeholder="First name">
    </mat-form-field>

    <mat-form-field>
      <input matInput placeholder="Age">
    </mat-form-field>
  </mat-expansion-panel>
  <mat-expansion-panel (opened)="panelOpenState = true"
                       (closed)="panelOpenState = false">
    <mat-expansion-panel-header>
      <mat-panel-title>
        Self aware panel
      </mat-panel-title>
      <mat-panel-description>
        Currently I am {{panelOpenState ? 'open' : 'closed'}}
      </mat-panel-description>
    </mat-expansion-panel-header>
    <p>I'm visible because I am open</p>
  </mat-expansion-panel>
</mat-accordion>

ts 文件
panelOpenState = false;

Answer 1

如果您使用的是模块架构，则必须在项目的根目录或模块中导入 Material 模块。 检查此 !

Answer 2

您必须在您使用它的模块中导入它：

import {MatExpansionModule} from '@angular/material/expansion';

Answer 3

无论您使用 mat-form-field、mat-expansion-panel 等什么，您都需要将其导入该组件的 .ts 文件以及 app.module.ts 文件中。

在你之后[​​=13=]

import {MatExpansionModule} from '@angular/material/expansion';

和

@NgModule({
imports:[
MatExpansionModule,]
})

您需要再次导入

import {MatExpansionModule} from '@angular/material/expansion'; 

这在您的组件的特定 .ts 文件中。