Material Angular扩展面板示例无法工作

Question

我在Material Angular上还是新手，正在尝试向我的项目添加一些组件。

目前我正在尝试将expansion-panel组件示例添加到对话框中，但该组件无法正常工作，我正在解决问题，但不知道原因。

我使用的版本是Angular 5.2.0和Material Angular 5.2.5。

我已经在main.ts中导入了该模块。

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

我创建了 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>

我创建了 expansion-overview.component.ts 文件

import {Component} from '@angular/core';

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

为了完成操作，我在我的对话框中添加了选择器jhi-expansion-overview。

简历

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

最终结果如下：

截图结果

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

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

谢谢

- Tanino

---

在您的代码中，展开概述组件(expansion-overview.component.html)中的<mat-accordion>标签没有关闭，可能是因为复制/粘贴的原因，对吗？ - Kalamarico

@Kalamarico 是的，在我写问题的时候，我复制/粘贴得不好。 - Tanino

Answer 1

前往 app.modules.js，并在导入中进行更改：

• 删除 NoopAnimationsModule
• 添加 BrowserAnimationsModule

在app.modules.js中

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

并且

    imports: [
    BrowserAnimationsModule,
    ...,
    ]

- Ania

Answer 2

我刚刚发现了错误，main.ts文件中缺少以下代码:

exports: [MatExpansionModule]

现在正在工作。

- Tanino