угловой материал мат-гармошка при щелчке вверху прокрутки не работает

Question

Angular Material - при щелчке по заголовку панели расширения будет вызываться функция onExpand, в этом временном окне прокрутка вверх (или) смена позиции не работает

onExpand(){
    window.scrollTo(0,0);
}

<mat-accordion>
  <mat-expansion-panel class="Alert" [expanded]="false" #Completed>
    <mat-expansion-panel-header (click)="Completed.expanded?onExpand():onCollapse()">
      <mat-panel-title>
        <span>
                    <span *ngIf="!Completed.expanded"><img id="Alrtimg" src="assets/img/app/completed_expand.png"></span>
        <span *ngIf="Completed.expanded"><img id="Alrtimg" src="assets/img/app/completed_collapse.png"></span>
        </span>
        <span class="AltMsgtxt">Completed</span>
      </mat-panel-title>
    </mat-expansion-panel-header>

    <mat-card *ngFor="let alrt of alerts" style="display: inline-block;border:0.6px solid #80808063;">

      <div fxLayout="row wrap" fxLayoutAlign="space-between center">
        <div fxFlex.gt-sm="100" fxFlex.gt-xs="100" fxFlex="100" fxFlex.gt-md="100">
          <p class="nudge_title">{{alrt.nudge_entity_name}}</p>
          <p class="nudge_amount">{{alrt.nudge_amount | currency:"INR":'symbol':'1.0-0'}}</p>
        </div>
      </div>
      <div fxLayout="row wrap" fxLayoutAlign="space-between center" style="padding: 0px 0px 18px 0px;">
        <div fxFlex.gt-sm="100" fxFlex.gt-xs="100" fxFlex="100" fxFlex.gt-md="100">
          <mat-progress-bar mode="determinate" value="40"></mat-progress-bar>
        </div>
      </div>
      <div fxLayout="row wrap" fxLayoutAlign="space-between center">
        <div fxFlex.gt-sm="100" fxFlex.gt-xs="100" fxFlex="100" fxFlex.gt-md="100">
          <p class="AlertDescr">{{alrt.nudge_msg}}</p>
        </div>
      </div>
    </mat-card>
  </mat-expansion-panel>
</mat-accordion>

Answer 1

Если вы хотите прокрутить верхнюю часть страницы после того, как щелкнули заголовок mat-expansion-panel, я предлагаю вам использовать afterExpand, как описано в документации по угловым материалам:

@ Output () afterExpand: EventEmitter

Событие, генерируемое после анимации расширения тела.

Здесь - быстрый бросок стека, который я бросил вместе, который показывает его в действии. Просто прокрутите немного вниз и щелкните заголовок панели расширения, она откроет панель и сразу же перейдет к началу страницы.

app.component.html

<mat-expansion-panel *ngFor="let i of largeArray" (afterExpand)="scrollToTop()">
  <!-- more HTML -->
</mat-expansion-panel>

app.component.ts

scrollToTop() {
  window.scrollTo(0, 0);
}