在初始加載中,如果我單擊“銷售”手風琴,然後單擊“報告和預測的總銷售額”,標記的滾動條將跳到頂部
標記的 ng-container 用於報告和預測總銷售額 UI
以下是總報告和預測銷售 UI 的 HTML
#
<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}} </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}} </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}} </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}} </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}} </span> </mat-label> <input matInput appNonNumeric placeholder="To" formControlName="drugSaleValueToCtrl"> </mat-form-field> </form> </div> </div> </ng-container>
新增preserve並檢查是否有效