Angular material : 使 select-面板始终向下打开

Question

我正在为我的应用程序使用 angular material，我希望 mat-select 始终在输入下方显示面板。

html

<mat-form-field class="flex-competition-select" appearance="fill">
    <mat-select (selectionChange)="getCompetitionsList($event.value)" [(ngModel)]="selectedSport">
        <mat-option *ngFor="let sport of sportsArray" [value]="sport.id">
            <mat-label> <b>{{sport.name | uppercase}}</b></mat-label>
        </mat-option>
    </mat-select>
</mat-form-field>

CSS

.flex-competition-select {
    background: white;
    border-color: white;
    border-style: solid;
    border-radius: 0.2em;
    border-width: 1px;
    font-size: 15px;
    text-align: center;
    margin: 2px;
    width: 300px;
    height: 56px;
}

Answer 1

刚刚将 [disableOptionCentering]="true" 添加到 mat-select 并且工作正常！

Answer 2

你可以做到：

<mat-form-field appearance="fill">
 <mat-select disableOptionCentering panelClass="customClass (selectionChange)="getCompetitionsList($event.value [(ngModel)]="selectedSport">
   <mat-option *ngFor="let sport of sportsArray" [value]="sport.id">
        <mat-label> <b>{{sport.name | uppercase}}</b></mat-label>
    </mat-option>
 </mat-select>
</mat-form-field>

style.scss :

.customClass {
  margin-top: 35px;
  // whatever you want
}