材料角度展开面板示例不起作用

Question

我对Material Angular很陌生，我正在尝试为我的项目添加一些组件。

现在我正试图将扩展面板组件示例添加到对话框中，但该组件不起作用，我正在处理，我不知道为什么。

我正在研究Angular 5.2.0和Material Angular 5.2.5。

我已经在主.ts 中导入了模块

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

我创建了扩展overview.component.html

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

我创建了overview.component.ts 的扩展

import {Component} from '@angular/core';
@Component({
selector: 'jhi-expansion-overview',
templateUrl: 'expansion-overview.component.html',
})
export class ExpansionOverviewComponent {
panelOpenState: boolean;
}

最后，我将选择器jhi扩展概述添加到我的对话框中

恢复

<div class="modal-header"></div>
<div class="modal-body">
<jhi-alert-error></jhi-alert-error>
<jhi-expansion-overview></jhi-expansion-overview>
</div>
<div class="modal-footer">
<button type="button" class="btn custom custom-btn-secondary" data-dismiss="modal" (click)="clear()">
<span jhiTranslate="entity.action.save">Save</span>
</button>
<button type="button" class="btn custom custom-btn-secondary" data-dismiss="modal" (click)="clear()">
<span jhiTranslate="entity.action.cancel">Cancel</span>
</button>
</div>
</form>

最后，我得到了这样的结果：

screnshot结果

我已经在我的项目中使用了其他组件，而这是我唯一遇到问题的组件。

有人知道我为什么会得到这个结果，或者我做错了什么吗？

感谢

Answer 1

转到app.modules.js并更改导入：

• 删除NoopAnimations模块
• 添加浏览器动画模块

在app.modules.js中

import {BrowserAnimationsModule} from    '@angular/platform-browser/animations';

和

imports: [
BrowserAnimationsModule,
...,
]

Answer 2

我刚刚发现错误，在main.ts中缺少添加：

exports: [MatExpansionModule]

现在正在工作。