Угловая панель расширения материала требует 3 щелчков, чтобы открыть после закрытия (Угловой> 10)

После закрытия панели расширения Angular Material Expansion Panel с помощью логической переменной она закрывается нормально, но чтобы снова открыть ее, вам нужно будет щелкнуть ее 3 раза, чтобы снова открыть. По-видимому, в Angular 6 он отлично работает с идентичным примером, но я, очевидно, не хочу понижать версию, я пробовал Angular 10 и 11, и это не сработало. Я также пытался закрыть его разными способами, например, методом закрытия панели и т. Д., Но без разницы.

Короткая гифка, показывающая проблему

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

Угловой 6https://stackblitz.com/edit/material-all-examples-quprqw?file=app%2Fapp.module.ts

Источник

1 ответ

Насколько я могу судить, это какая-то проблема с рендерингом, из-за которой не удается обновить / отобразить израсходованную строку. То, что я сделал, далеко не идеально, но оно работает, поэтому используйте его, если хотите. Я отслеживаю статус открытия / закрытия меню и на основании этого полностью визуализирую расширенную кнопку и панель расширения.

В component.ts я добавил переменную:

        menuOpen = false;

и в component.html я сделал:

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

(обратите внимание на «menuOpen = false;»)

И, наконец, я добавил *ngIf как к кнопке, так и к панели расширения на основе переменной «menuOpen».

      <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

Источник
Другие вопросы по тегам