Материал Угловая панель расширения пример не работает

Question

Я довольно новичок в Material Angular и пытаюсь добавить некоторые компоненты в свой проект.

Сейчас я пытаюсь добавить пример компонента расширение панели в диалог, но компонент не работает, я работаю вокруг и не могу понять, почему.

Я работаю над Угловой 5.2.0 и Материал Угловой 5.2.5 .

Я уже импортировал модуль в main.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-extension-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>

В итоге я получаю это как результат:

результат скриншота

Я уже использую другие компоненты в своем проекте, и это единственный, у меня возникла проблема.

Кто-то знает, почему я получаю этот результат или что я делаю неправильно?

Спасибо

Answer 1

Я только что нашел ошибку, в main.ts пропало добавить:

exports: [MatExpansionModule]

Сейчас работает.