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

Question

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

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

Answer 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将出现在您的页面上