角材料扩展模块不起作用

Question

我正在尝试实现Angular Material's Expansion Module.的第一个示例

它正在显示，但不是应该显示的方式：



我认为我已经安装了所有东西。另外，我导入了MatExpansionModule和MatFormFieldModule。

要安装Angular Material，我要遵循官方的"Getting Started"。

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