Угловой материал md-выберите выбранное значение по умолчанию

Я использую Angular 2 с Angular Material. Глядя на документацию, я пытаюсь заставить select иметь значение по умолчанию, а не пустой заполнитель.

Я пробовал следующие два варианта, и оба они не устанавливают значение по умолчанию.

<md-select selected="1">
  <md-option value="1" >One</md-option>
  <md-option value="2">Two</md-option>
</md-select>

<md-select>
  <md-option value="1" selected="true">One</md-option>
  <md-option value="2">Two</md-option>
</md-select>

Я просмотрел всю документацию и примеры, ни один из них не помог


angular angular-material2
person ErnieKev    schedule 09.02.2017    source источник

Ответы (4)


arrow_upward
40
arrow_downward

Используйте 1_:

<mat-select [(ngModel)]="selectedOption">
  <mat-option value="1">One</mat-option>
  <mat-option value="2">Two</mat-option>
</mat-select>

Компонент:

selectedOption = '1';

ДЕМО

Изменить №1:

Поскольку Material2.0.0 # beta10 (в частности, этот PR ) можно выбрать значение с помощью value свойства MatSelect:

<mat-select [value]="selectedOption">
  <mat-option value="1">One</mat-option>
  <mat-option value="2">Two</mat-option>
</mat-select>

Компонент:

selectedOption = '1';

Обратите внимание, что вы также можете использовать его с двусторонней привязкой данных - ›[(значение)].

ДЕМО

person developer033    schedule 10.02.2017
comment
Это работает. Как вы пришли к выводу, что это именно так? Нигде в документации не упоминается это - person ErnieKev; 10.02.2017
comment
Это базовая вещь в Angular. Сайт / api / docs Angular Material все еще находится в стадии разработки, он все еще находится на стадии бета-тестирования. - person developer033; 10.02.2017
comment
Можете ли вы посмотреть документацию по Angular Material. Для md-option есть свойство selected и метод select (). Разве не имеет смысла делать что-то вроде md-option selected = true как обычный раскрывающийся список HTML? - person ErnieKev; 10.02.2017
comment
Есть ли свойство для md-option сделать его по умолчанию? - person ahmadalibaloch; 28.05.2017
comment
Это не работает для меня (см. Здесь) - любая идея, что Я делаю не так? - person Stefan Falk; 13.01.2019
comment
Хорошо, они действительно должны обновить материалы angular docs, чтобы сказать, как установить значение по умолчанию. Конечно, это стандартные элементы angular, но люди не знают, есть ли пользовательский API из материального компонента angular, который они должны использовать вместо этого ... а некоторые люди до сих пор не знают способ Angular установить значения формы по умолчанию. - person TetraDev; 12.11.2020

arrow_upward
7
arrow_downward 

 <mat-select [value]="0" >

Мы можем легко сделать это, установив значение по умолчанию.

person Vikram Jangra    schedule 08.08.2019
comment
Имейте в виду, что если вам нужно получить значение после выбора новой опции, используйте метод Banana-in-a-Box для получения события, которое обновит значение: <mat-select [(value)]="selectedValue" >. Затем просто инициализируйте selectedValue в своем компоненте, и вы тоже можете его слушать. - person TetraDev; 12.11.2020

arrow_upward
0
arrow_downward

Согласно документации, вы можете сделать это следующим образом.

Вариант: 1

<md-select value={{ defaultValue }}>
  <md-option value="{{ defaultValue }}">{{defaultValue}}</md-option>
  <md-option value="1">One</md-option>
  <md-option value="1">One</md-option>
  <md-option value="2">Two</md-option>
</md-select>

Вариант: 2

<md-select value="None">
  <md-option value="None">None</md-option>
  <md-option value="1">One</md-option>
  <md-option value="1">One</md-option>
  <md-option value="2">Two</md-option>
</md-select>

Это должно быть любое значение в раскрывающемся списке выбора. Иначе не пойдет.

person Ahmad Sharif    schedule 22.07.2020

arrow_upward
0
arrow_downward 

<mat-select formControlName="timezone" required [(ngModel)]="selectedOption">
      <mat-option *ngFor="let item of array" [value]="item.value">{{item.name}}</mat-option>
</mat-select>

для корректной работы нужна привязка значения [value] или оно не работает

person extraterrestrial martian    schedule 16.07.2021