Как динамически добавить панель расширения мат?

Question

Я не могу добавить панель расширения мат программно.Я хочу добавить их, когда пользователь вызывает функцию по нажатию кнопки.Добавляйте панель расширения столько раз, сколько хотите.

Я попытался добавить тег HTML для расширения матов, что является одним из самых неправильных способов попробовать это.Он просто добавляет тег и игнорирует компонент.

Answer 1

Вы можете добавить свои данные панели расширения матов в массив (matExpansionPanelArray), а затем использовать * ngFor:

<mat-accordion>
    <mat-expansion-panel *ngFor="let item of items;">
        <mat-expansion-panel-header>
            <mat-panel-title>{{item.title}}</mat-panel-title>
            <mat-panel-description>{{item.description}}</mat-panel-description>
        </mat-expansion-panel-header>
        <mat-form-field>{{item.formField}}</mat-form-field>
    </mat-expansion-panel>
</mat-accordion>

Таким образом, если вы динамически добавляете данные в свой «matExpansionPanelArray», на вашей странице появится новая панель расширения матов