在选择器中使用open方法扩展mat-expansion-panel

Question

在mat-expansion-panel中使用打开方法扩展selector(mat-expansion-panel)

我在我的应用程序中使用mat-expanison-panel，并且我已经有一个裁判。放在我的.ts文件中。

@ViewChild('expansionPanel') public expansionPanel: MatExpansionModule;

<mat-expansion-panel #expansionPanel class="expansion-card" [expanded]="flashcardInputExpanded" [disabled]="!collapsable">
  <mat-expansion-panel-header>

我正在尝试通过fn调用扩展panel，就像这样。

  open() {
    this.expansionPanel.open();
  }

但令人担忧的是，它无法正常工作，无法通过调用this.expansionPanel.open();来扩展面板。

参考api面板-https://material.angular.io/components/expansion/api

在我的情况下，mat-expansion-panel位于sidenav内，

@ViewChild('sidenav') public sidenav: MatSidenav;

所以，首先打开sidenav后，情况就是这样。

但是当我关闭sidenav组件并再次打开它时，它就是这样。

请记住，在此mat-expansion-panel中，我们只有一个道具[expanded] =“ true”。

Answer 1

您可以使用扩展面板输入变量expanded。就您而言，您已经定义了变量flashcardInputExpanded。

<mat-expansion-panel [expanded]="flashcardInputExpanded">

您可以执行以下操作：

open() {
  this.flashcardInputExpanded = true;
}