使用带有角度材料的标签时,扩展面板始终打开

时间:2018-04-05 22:27:30

标签: javascript css angular typescript angular-material

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

我的问题是当我选择包含面板的标签时,它们会折叠,但面板的内容是可见的。

enter image description here

我已经看到它在角度材质5中存在问题并且在Angular Material 6.0.0.beta0中得到了解决,但目前我无法更新我的package.json。所以我在Angular Material 5v中提到了here的一种解决方法,但这对我不起作用。

这就是我做的事情

在我的父组件中,我使用selectedIndex

Input()值传递给组件
<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?

0 个答案:

没有答案