0

在我正在开发的应用程序中，我有一个 Angular Material 对话框，其中包含公司的 mat-selection-list 和字母字符的 mat-list，可以单击以跳转到不同的字母标题。我的问题是，每次启动对话框时，包含我的字母表（对话框的右侧）的 mat-list 必须“弹出”到位，而不是最初应该在的位置。这看起来有点草率/跳跃，我想知道是否有任何方法可以让它在正确的位置。

这是一个展示该问题的 gif： https ://imgur.com/a/rdn1lq6

这是我当前的代码：

// Opening the dialog
const dialogRef = this.dialog.open(CompanySelectionDialog, {
  width: '90vw',
  panelClass: 'companySelectionPanel', 
  data: {companies: this.companies},
  disableClose: true
});

以及实际对话内容的 HTML：

<!-- Dialog Page HTML -->
<mat-dialog-content>
  <div *ngFor="let companies of this.companiesSortedByLetter" style="width: 95%">
    <mat-toolbar [id]="companies.letter">
      <span>{{ companies.letter.toUpperCase() }}</span>
    </mat-toolbar>
    <mat-selection-list #companies [multiple]="false" [(ngModel)]="selectedCompany">
      <mat-list-option ngDefaultControl *ngFor="let sortedCompany of companies.companies" [value]="sortedCompany" mat-dialog-close (click)="onSelect(selectedCompany[0])">
        {{ sortedCompany.Description + ' ' + sortedCompany.ID }}
      </mat-list-option>
    </mat-selection-list>
  </div>
  <div style="display: block; position: absolute; left: 83.5%; bottom: 50%; top: 20%; right: 0%; z-index: 100;">
    <mat-list>
      <mat-list-item class="alphaList" ontouchmove="console.log('moved')" matRipple
        *ngFor="let letter of this.companiesSortedByLetter"
        (click)="scrollToLetter(letter.letter)">{{ letter.letter.toUpperCase() }}
      </mat-list-item>
    </mat-list>
  </div>
</mat-dialog-content>

我的 global.scss 中的样式规则用于面板：

.companySelectionPanel {
  .alphaList {
    @media screen and (max-height: 1024px) {
      height: 30px !important
    }

    @media screen and (min-height: 1366px) {
      height: 38px !important
    }
  }
}

提前感谢任何人对此的任何见解。

4

0 回答 0