Angular的mat-expansion-panel显示折叠时的内容

Question

正如您所看到的，TestGroup1面板显示它已折叠（基于箭头），但我仍然可以看到面板的内容。单击它时，它会正常打开和关闭（如TestGroup2）。

我的扩展面板[expanded]="panelOpenState"中有此功能 这是基于此设置为上面的按钮。最初，它设置为false。

togglePanel() {
this.panelOpenState = !this.panelOpenState;
}

Html代码

      <div class="component-panel-body">
    <mat-expansion-panel *ngFor="let group of groups[selectedDeviceSource.id]" [expanded]="panelOpenState">
      <mat-expansion-panel-header>
        <mat-panel-title> {{ group.name }} </mat-panel-title>
      </mat-expansion-panel-header>
        <table class="table table-striped table-hover">
          <thead>
          <tr>
            <th class="qkFix">{{'TEAMVIEWER.DEVICE-ID' | translate}}</th>
            <th class="qkFix">{{'TEAMVIEWER.ALIAS' | translate}}</th>
            <th class="qkFix">{{'TEAMVIEWER.STATUS' | translate}}</th>
            <th class="qkFix">{{'TEAMVIEWER.OPTIONS' | translate}}</th>
          </tr>
          </thead>
          <tbody>
          <tr class="user-item" *ngFor="let device of group.devices" (click)="$event.stopPropagation()">
            <td class="qkFix">{{ device.deviceId }}</td>
            <td class="qkFix">{{ device.alias }}</td>
            <td class="qkFix" *ngIf="device.onlineState == 'Online'" ngClass="colorOnline">{{ device.onlineState }}
              <span class="dotOnline"></span>
            </td>
            <td class="qkFix" *ngIf="device.onlineState == 'Offline'" ngClass="colorOffline">{{ device.onlineState }}
              <span class="dotOffline"></span>
            </td>
            <td class="qkFix">
              <button type="button" class="btn btn-default btn-xs" (click)="$event.stopPropagation(); showDevice(device); editDeviceDialog()">
                <i class="material-icons">{{ (auth.hasPermissions(['update-devices'], true)) ? 'edit' : 'open_in_new'}}</i>
              </button>
              <button [disabled]="!(auth.hasPermissions(['delete-devices'], true))" type="button" class="btn btn-default btn-xs" (click)="$event.stopPropagation();deleteDevice(device)">
                <i *ngIf="(auth.hasPermissions(['delete-devices'], true))" class="material-icons" (click)="$event.stopPropagation();deleteDevice(device)">delete</i>
                <i *ngIf="!(auth.hasPermissions(['delete-devices'], true))" class="material-icons" (click)="$event.stopPropagation()">delete</i>
              </button>
              <button *ngIf="device.onlineState == 'Online'" [disabled]="!(auth.hasPermissions(['remote-control'], true))" type="button" class="btn btn-default btn-xs" (click)="$event.stopPropagation(); remoteSession(device)">
                <i *ngIf="(auth.hasPermissions(['remote-control'], true))" (click)="$event.stopPropagation();remoteSession(device)" class="material-icons">swap_horiz</i>
                <i *ngIf="!(auth.hasPermissions(['remote-control'], true))" (click)="$event.stopPropagation()" class="material-icons">swap_horiz</i>
              </button>
            </td>
          </tr>
          </tbody>
        </table>
    </mat-expansion-panel>
  </div>