Gibt es eine Lösung für das Problem, dass die Bildlaufleiste auf der linken Seite der Modalbox nach oben zurückkehrt, wenn auf ein Element im Akkordeon geklickt wird?

Question

Wenn ich beim ersten Laden auf das Akkordeon „Umsätze“ und dann auf „Gemeldete und prognostizierte Gesamtverkäufe“ klicke, springt die beschriftete Bildlaufleiste nach oben

mit Tag versehener NG-Container für die Benutzeroberfläche zur Berichterstattung und Prognose des Gesamtumsatzes

Hier ist der HTML-Code für die Benutzeroberfläche „Gesamtbericht und Prognoseverkäufe“

<ng-container *ngIf="cciLeftSideFilterSplitIO && dataSetName === 'DRUGS'">
            <div mat-dialog-content class="matContent" *ngIf="filter.filterGroupKey === 'drugReportedSalesAndForecastGroup'">
                <div class="drugSaleGroupContainer" *ngIf="regions.length > 0">
                    <form [formGroup]="drugSaleForm">
                        <mat-form-field appearance="outline" class="drugSaleRegion">
                            <mat-label>
                              <span class="ctrlTxt">{{"I18N.DRUGS.FILTERS.DISPLAYNAMES.drugSaleRegion" | translate}}&nbsp;</span>
                            </mat-label>
                            <mat-select (click)="showRegion()" panelClass="select-panel-class" [formControlName]="'drugSaleRegionCtrl'">
                              <mat-option *ngFor="let region of regions" [value]="region.optionName">{{region.optionName}}</mat-option>
                            </mat-select>
                        </mat-form-field>
                        <mat-form-field appearance="outline" class="drugSaleYears" id="fromYear">
                            <mat-label>
                              <span class="ctrlTxt">{{"I18N.DRUGS.FILTERS.DISPLAYNAMES.drugSaleYearFrom" | translate}}&nbsp;</span>
                            </mat-label>
                            <input appDrugSaleYearFormat (click)="fromYear.open()" appNonNumeric matInput [min]="minYearFrom" [max]="maxYearFrom" [(ngModel)]="selectedFromYear"
                            [matDatepicker]="fromYear" class="dateInputElmt"
                            formControlName="drugSaleYearFromCtrl" (ngModelChange)="datePickedEvent('input','from', $event)">
                            <mat-datepicker-toggle matSuffix [for]="fromYear">
                            </mat-datepicker-toggle>
                            <mat-datepicker class="from-date-picker-ref" panelClass="quick-finder-year-picker" #fromYear startView= 'multi-year' (yearSelected)="chosenYearHandler('from', $event, fromYear)"></mat-datepicker>
                        </mat-form-field>
                        <mat-form-field appearance="outline" class="drugSaleYears" id="toYear">
                            <mat-label>
                              <span class="ctrlTxt">{{"I18N.DRUGS.FILTERS.DISPLAYNAMES.drugSaleYearTo" | translate}}&nbsp;</span>
                            </mat-label>
                            <input appDrugSaleYearFormat (click)="toYear.open()" appNonNumeric matInput [min]="minYearTo" [max]="maxYearTo" [(ngModel)]="selectedToYear" 
                            [matDatepicker]="toYear" class="dateInputElmt"
                            formControlName="drugSaleYearToCtrl" (ngModelChange)="datePickedEvent('input','to', $event)">
                            <mat-datepicker-toggle matSuffix [for]="toYear">
                            </mat-datepicker-toggle>
                            <mat-datepicker class="from-date-picker-ref" panelClass="quick-finder-year-picker" #toYear startView= 'multi-year' (yearSelected)="chosenYearHandler('to',$event,toYear)" ></mat-datepicker>
                        </mat-form-field>
                        <span class="drugSaleBtnGroup">
                            <button class="drugSaleClearBtn" (click)="clearSalesFilter()">Clear</button>
                        </span>
                        <mat-form-field appearance="outline" class="drugSaleYears" id="fromValue">
                            <mat-label>
                              <span class="ctrlTxt">{{"I18N.DRUGS.FILTERS.DISPLAYNAMES.drugSalesYearValue" | translate}}&nbsp;</span>
                            </mat-label>
                            <input matInput appNonNumeric placeholder="From" formControlName="drugSaleValueFromCtrl">
                        </mat-form-field>
                        <mat-form-field appearance="outline" class="drugSaleYears" id="toValue">
                            <mat-label>
                              <span class="ctrlTxt">{{"I18N.DRUGS.FILTERS.DISPLAYNAMES.drugSalesYearValue" | translate}}&nbsp;</span>
                            </mat-label>
                            <input matInput appNonNumeric placeholder="To" formControlName="drugSaleValueToCtrl">
                        </mat-form-field>
                    </form>
                </div>
            </div>
        </ng-container>

Answer 1

<div mat-dialog-content class="matContent" *ngIf="filter.filterGroupKey === 'drugReportedSalesAndForecastGroup'" preserve>
  </div>

添加preserve并检查是否有效