angular - 如何在单击按钮时动态添加 Angular 材扩展面板？

我正在我的Angular 7应用程序中设置一个动态扩展面板，在mat-expansion-panel中默认显示一个mat-accordion。现在我有了一个add按钮，我想如果用户点击这个按钮，一个新的mat-expansion-panel应该用一个小表单或4mat-accordion附加到form inputs中。
我在rendered2课上试过，但对我不起作用。我可能遗漏了什么。

<mat-accordion id="quoteAccordion">
   <mat-expansion-panel>
       <mat-expansion-panel-header>
          <mat-panel-title>
             <!--  -->
               Panel Title Here
               <!--  -->
               </mat-panel-title>
                  <mat-panel-description>
                    Panel description here
                  </mat-panel-description>
       </mat-expansion-panel-header>
       <!-- Panel Body -->
           <div formArrayName="services" *ngFor="let service of services.controls; let i = index">
                <mat-form-field appearance="outline" fxFlex="30" class="pr-4">
                   <mat-label> Description</mat-label>
                   <input matInput formControlName="title" required>
                   <mat-error>Description is required!</mat-error>
                </mat-form-field>
           </div
       <!-- /Panel Body -->
       </mat-expansion-panel>
       <!--
           on click of [Add] button
           Need to append another expansion
           panel with form input here
        -->
</mat-accordion>
       <!--  Ends Here -->
       </div>
<button class="w-100" matTooltip="Add" type="button" mat-raised-button (click)="addAccordion()">
       <mat-icon>add</mat-icon> ADD
</button>

我期望用mat-expansion-panel添加动态expansion-header的输出，expansion-body包含一个form-input。
提前谢谢！啊！

最佳答案

我相信这是一个很好的方法来处理这种情况。
每当您想在用户的任何操作（如单击）上创建一组新的输入控件时，请执行以下操作：
在Array中创建类型为ancomponent.ts的变量，并将空对象推入Array中，因为您希望显示默认控件。
现在使用component.html在*ngFor文件中循环这个变量。
每当用户单击add按钮时，只要使用Array将一个空对象推入Array.push(object)中，那么angular将自动添加新控件，因为您已经遍历了Array。
告诉我它是否有效。