如何动态添加垫扩展面板？

【问题标题】：How to dynamically add mat-expansion panel?如何动态添加垫扩展面板？
【发布时间】：2019-10-09 05:45:40
【问题描述】：

我无法以编程方式添加 mat-expansion-panel。当用户通过单击按钮调用函数时，我想添加它们。根据需要多次添加扩展面板。

我尝试为 mat-expansion 添加 HTML 标记，这是一种非常不正确的尝试方法。它只是添加标签并忽略组件。

【问题讨论】：

【解决方案1】：

您可以将 mat-expansion-panel 数据添加到数组 (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”，您的页面上将出现一个新的 mat-expansion-panel

【讨论】：