Question

我在mat-expansion-panel中有一个角6 mat-accordion。 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将重新绘制，面板将部分关闭，然后再次打开。

关于如何保持面板处于打开状态，直到通过单击向上箭头手动将其关闭，或者直到另一个面板被打开的任何建议，都很欢迎。

Answer 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，然后将上述脚本添加到点击功能中

Angular-保持扩展垫扩展面板

1 个答案: