Mat-stepper索引更改时如何删除表格

Question

我正在使用此Stackblitz示例在mat-stepper中动态创建表单。 我有3个steppers个人详细信息，地址和联系方式。 但是，当我打开“地址”表单然后切换到联系人时，我希望该地址表单消失。 下面是我的代码。有人可以帮我指出我的错误吗？

HTML中的Mat-stepper代码

  <mat-step label="Personal Details" state="chat">
      <div class="col-sm-offset-10">
          <button mat-icon-button color="primary" matTooltip="Create New Form" (click)="addPersonalDetails()">
            <mat-icon aria-label="Example icon-button with a heart icon">add_circle_outline</mat-icon>
          </button>
        </div>
    <div>
      <hr />
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button matStepperNext>Next</button>
    </div>
  </mat-step>
<mat-step label="Address" state="chat">
      <div class="col-sm-offset-10">
          <button mat-icon-button color="primary" matTooltip="Create New AddressForm" (click)="addAddress()">
            <mat-icon aria-label="Example icon-button with a heart icon">add_circle_outline</mat-icon>
          </button>
        </div>
    <div>
      <hr />
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button matStepperNext>Next</button>
    </div>
  </mat-step>
<mat-step label="Contact" state="chat">
      <div class="col-sm-offset-10">
          <button mat-icon-button color="primary" matTooltip="Create New Contact Form" (click)="addContact()">
            <mat-icon aria-label="Example icon-button with a heart icon">add_circle_outline</mat-icon>
          </button>
        </div>
    <div>
      <hr />
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button matStepperNext>Next</button>
    </div>
  </mat-step>

打字稿代码

  addPersonalDetails() {
  this.service.setRootViewContainerRef(this.viewContainerRef);
 this.service.addDynamicPersonalComponent();
  }
  addAddress() {
this.service.setRootViewContainerRef(this.viewContainerRef);
this.service.addDynamicAddressComponent();
}
addContact() {
this.service.setRootViewContainerRef(this.viewContainerRef);
this.service.addDynamicContactComponent();
}

Typescript代码调用地址，个人详细信息和其他组件。 现在，如果我单击添加表单按钮作为地址，然后切换到联系步进器，我想隐藏地址表单并显示联系表单。 目前，来自的地址留在那里，并在其下方显示联系表单。

当前，这是该页面在我的应用中的外观

如果我更改标签，则应该能够为每个步进器选项分别隐藏和显示表单。