我在其中一个标签中创建了标签和扩展面板 .

My problem 是当我选择包含面板的选项卡时，它们会折叠但面板的内容是可见的 .

enter image description here

我已经看到它's an issue in angular material 5 and was solved in Angular Material 6.0.0.beta0 but for the moment I can' t更新我的package.json . 所以我在Angular Material 5v中尝试了一种解决方法，提到here但它对我不起作用 .

这就是我做的

在我的父组件中，我使用 Input() 将 selectedIndex 值传递给组件

<div flexLayout="column">
  <mat-tab-group [(selectedIndex)]="selectedTabIndex" fxFlex="70" fxFlex.xs="100">
    <mat-tab label="A propos de moi">  
      <app-a-propos></app-a-propos>
    </mat-tab>
    <mat-tab label="Formation et experiences">
      <app-experiences [selectedTabIndex]=selectedTabIndex></app-experiences>
    </mat-tab>
    <mat-tab label="Projets Perso"> 
      <app-projets [selectedTabIndex]=selectedTabIndex></app-projets>
    </mat-tab>
  </mat-tab-group>
</div>

在 app-experiences.html

<div *ngIf="selectedTabIndex == 1">
    <mat-accordion>
      <mat-expansion-panel [expanded]="false">
        <mat-expansion-panel-header class="right-aligned-header">
          <mat-panel-title>
            Cycle ingénieur en informatique
          </mat-panel-title>
        </mat-expansion-panel-header>
      </mat-expansion-panel>      
      <mat-expansion-panel [expanded]="false">
        <mat-expansion-panel-header class="right-aligned-header">
          <mat-panel-title>
            Cycle préparatoire integré
          </mat-panel-title>
        </mat-expansion-panel-header>
      </mat-expansion-panel>
    </mat-accordion>
  </div>

在 app-experiences.ts

export class ExperiencesComponent implements OnInit {
  @Input() selectedTabIndex: number;
  constructor() { }
  panelOpenState = true;
  ngOnInit() {
  }

}

如何在不使用Angular Material 5.2.0的情况下将面板展开选项设置为false？

javascript css angular typescript angular-material