如何使用Mat-Slide在条件下显示/隐藏数据

Question

我有一个席子扩展面板，用于显示客户地址。 我只想显示活动的客户。最初，当用户滑动mat-toggle时，我也想显示不活动的地址，当用户再次单击mat-toggle时，我想隐藏不活动的地址。 目前，我在活动地址前面显示一个绿色的复选图标。我想将其删除，并用mat-toggle替换它。 我该怎么做

当前HTML代码：

  <!-- Card for Address -->
              <div class="row">
                <div class="address-card col-md-12">
                  <mat-accordion>
                    <mat-expansion-panel>
                      <mat-expansion-panel-header>
                        <mat-panel-title>
                          Address Details
                        </mat-panel-title>
                      </mat-expansion-panel-header>

                      <mat-tab-group>
                        <mat-tab *ngFor="let address of distinctAdressType" label="{{ address }}">
                          <div *ngFor="let element of sampleData1.address">
                            <div *ngIf="address.toString() === element.addressType">
                              <br />

                              <mat-label>
                                <div class="row">
                                  <div class="col-md-9">
                                    Address: {{ element.addressLine1 + ' ' + element.addressLine2 + ' ' + element.addressLine3 }}
                                  </div>

                                  <div *ngIf="element.addressStatus">
                                    <i class="fa fa-check" style="font-size:15px;color:green"></i>
                                  </div>
                                  <ng-template #inActive>
                                    <!-- <i class="fa fa-close" style="font-size:15px;color:red"></i> -->
                                  </ng-template>
                                </div>
                              </mat-label>
                              <mat-label> City: {{ element.city }}</mat-label> <br />
                              <mat-label>Agreement Id:{{ element.agreement }}</mat-label>
                              <br />

                              <br />
                            </div>
                          </div>
                        </mat-tab>
                      </mat-tab-group>
                    </mat-expansion-panel>
                  </mat-accordion>
                </div>
              </div>

地址的打字稿代码：

 // Access Address Type from API.
      this.sampleData1.address.forEach(address => {
        this.addressType.push(address.addressType);
        const addressEndDateObj = new Date(address.endDate);
        console.log('End Date: ', addressEndDateObj);
        if (addressEndDateObj.getTime() >= this.currentDate.getTime()) {
          address.addressStatus = true;
        } else {
          address.addressStatus = false;
        }
      });
      this.distinctAdressType = this.addressType.filter(this.onlyUnique);