Angular - 保持垫扩展面板展开答案

【问题标题】：Angular - Keep Mat Expansion Panel ExpandedAngular - 保持垫扩展面板展开
【发布时间】：2019-01-12 12:19:57
【问题描述】：

我在 mat-accordion 中有一个 Angular 6 mat-expansion-panel。 mat-expansion-panel 是绑定到moves 数组的数据，如下所示：

  <mat-accordion fxFlex
             displayMode="default"
             multi="false"
             style="overflow-y: auto; background-color: transparent;">
<mat-expansion-panel *ngFor="let move of moves"
                     (opened)="onMoveOpened(move)">

  <mat-expansion-panel-header style="padding-left: 8px; height: 48px;" expandedHeight="48px">

        <move-header [move]="move" style="width: 100%; padding: 0;"
                     (moveSelected)="onMoveSelected(move)">

        </move-header>

  </mat-expansion-panel-header>

  <move-info [move]="move" style="width: 100%;"></move-info>


  <mat-action-row style="padding-top: 8px; padding-bottom: 8px;">
    <button mat-button color="accent" (click)="onClickEdit(move)">Edit</button>

    <button mat-mini-fab
            color="accent"
            (click)="onClickClockwise($event, move)"
            style="transform: scale(0.6);">
      <i class="material-icons" style="font-size:24px;">redo</i>
    </button>
    <button mat-mini-fab
            color="accent"
            (click)="onClickAntiClockwise($event, move)"
            style="transform: scale(0.6);">
      <i class="material-icons" style="font-size:24px; transform: scale(-1, 1);">redo</i>
    </button>

  </mat-action-row>

</mat-expansion-panel>

mat-action-row 有两个按钮，顺时针和逆时针，它们可以在屏幕上重新定位一些图形。计算图形新位置的函数会更新moves 数组中的值，因为图形也是绑定到moves 的数据。这样做的效果是重绘mat-expansion-panel，它关闭了用户正在使用的打开的面板。如果用户想多次点击mat-action-row中的某个按钮，每次都要打开面板，很烦人！

我尝试将expanded 属性添加到我的move 类并将每个面板的expanded 属性绑定到此。它有所帮助，但在单击 mat-action-row 按钮后，mat-expansion-panel 会重新绘制，面板会部分关闭然后再次打开。

非常欢迎任何关于如何保持面板打开直到手动关闭、单击向上箭头或直到打开另一个面板的建议。

【问题讨论】：

标签： angular

【解决方案1】：

我试过这段代码，成功了：

if(this.matExpansionPanel.extended) { // usually return false for it catched the state when you clicked the button - when the panel was still closed
    // do something you want
}
else {
    this.matExpansionPanel.toggle();
    // do something you want
}

在您的情况下，在 mat-extension-panel 标记内，添加 #youNameIt='matExpansionPanel'。

matExpansionPanel 是导出类型的角材质扩展面板，如Angular Material 中所述。回到.ts脚本，添加@ViewChild('youNameIt') matExpansionPanel /*or any name you want*/ : MatExpansionPanel，然后在你的点击函数中添加上面的脚本

【讨论】：