2

通过布尔变量关闭 Angular Material Expansion Panel 后，它关闭得很好，但要再次打开它，您需要单击它 3 次才能重新打开它。显然，在 Angular 6 中，它在相同的示例中运行良好，但我显然不想降级，我尝试了 Angular 10 和 11，但它没有用。我还尝试通过面板的关闭方法等不同的方式关闭它，但没有区别。

显示问题的简短 gif

Stackblitz：Angular 11： https ://stackblitz.com/edit/angular-ivy-4qj1n9?file=src%2Fapp%2Fapp.component.html

角 6 https://stackblitz.com/edit/material-all-examples-quprqw?file=app%2Fapp.module.ts

€dit：我能够创建一个没有这种奇怪行为的版本，但它没有动画，这也很糟糕。 https://stackblitz.com/edit/angular-ivy-ar4tjp?file=src%2Fapp%2Fapp。组件.html

4

1 回答 1

0

据我所知，这是某种渲染问题，无法更新/渲染已用的行。我所做的远非完美，但它确实有效，所以如果你愿意，可以使用它。我正在跟踪菜单的打开/关闭状态，并基于此完全呈现展开的按钮和扩展面板。

在 component.ts 我添加了变量：

  menuOpen = false;

在component.html中我做了：

<button mat-icon-button [matMenuTriggerFor]="menu"
(click)="menuOpen=true"
(menuClosed)="langExpanded=false; menuOpen=false;"
>

（注意“menuOpen=false;”）

最后，我根据“menuOpen”变量将 *ngIf 添加到按钮和扩展面板中

<button *ngIf="menuOpen" class="mat-menu-item" style="display:inline;"
   (click)="$event.stopPropagation();  langExpanded=!langExpanded;">
    <mat-icon>translate</mat-icon>
    <span>Language</span>
    <mat-icon class="customexpandicon" *ngIf="!langExpanded; else expandedIcon">expand_more</mat-icon>
    <ng-template #expandedIcon><mat-icon class="customexpandicon">expand_less</mat-icon></ng-template>
  </button>

  <mat-expansion-panel *ngIf="menuOpen" #langPanel="matExpansionPanel" class="mat-elevation-z0"
    (click)="$event.stopPropagation()" [disabled]="true" [expanded]="langExpanded">

应用了更改的 stackblitz：https ://stackblitz.com/edit/angular-ivy-ylkbwu?file=src/app/app.component.html

于 2021-03-15T12:15:50.483 回答