Как сделать так, чтобы выпадающий список открывался в позиции выбранного значения в angular?

#angular #dropdown #html-select #option

#angular #выпадающий список #html-выберите #опция

Вопрос:

Я создал выпадающий список в Angular с помощью select. Я хочу, чтобы выбранное значение было видно в раскрывающемся списке при первом нажатии на него, поэтому мне не нужно прокручивать весь путь вниз. Например, я сделал этот выпадающий список, показывающий годы с 1950 по 2020 год. Я хочу, чтобы раскрывающийся список открывался с отображаемым в нем выбранным по умолчанию годом (в моем случае 2010). Как я могу этого добиться?

…

 <select>
    <option *ngFor="let year of years" [selected]="year == 2010">{{year}}</option>
</select>

…

Ответ №1:

Если вы не против использования Angular Material, mat-select откроется выбор из выбранного значения.

 <mat-form-field>
 <mat-select value="2010">
  <mat-option *ngFor="let year of years" [value]="year">{{year}}</mat-option>
 </mat-select>
</mat-form-field>

https://material.angular.io/components/select/overview