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

Question

mat-expansion-panel使用 open 方法展开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>

我正在尝试扩展panelfn 呼叫，类似这样。

  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"。

标签： angularangular-materialangular-material-6

Answer 1

您可以使用扩展面板输入变量expanded。在您的情况下，您已经flashcardInputExpanded定义了变量。

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

你可以这样做：

open() {
  this.flashcardInputExpanded = true;
}