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

Posted 2023-03-13

【中文标题】Angular 6 错误显示 <mat-panel-title> 不是已知元素

【英文标题】：Angular 6 error show <mat-panel-title> is not a known element

【发布时间】：2020-03-31 07:35:25

【问题描述】：

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

'mat-panel-title' 不是已知元素： 'mat-panel-description' 不是已知元素： 'mat-expansion-panel-header' 不是已知元素： 'mat-form-field' 不是已知元素： '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;

【参考方案1】：

如果您使用模块架构，则必须在项目的根目录或模块中导入材质模块。 检查这个https://***.com/a/46480745/9490861！

【参考方案2】：

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

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