угловой 2 - как установить <select> выбранная по умолчанию опция

Мой шаблон похож на этот

<select>
  <option>AM</option>
  <option>PM</option>
</select>

Как установить параметр AM по умолчанию?

ОТВЕТЫ

Ответ 1

Старый чистый способ HTML просто работает с Angular2, если вы не хотите ничего динамически делать:

<select>
  <option selected>AM</option>
  <option>PM</option>
</select>

Но следующим является способ Angular 2, который позволяет динамически назначать выбранное значение, которое может быть практическим и распространенным случаем использования: (вам нужно импортировать FormsModule)

<select [(ngModel)]='selectedValue'>
  <option value='AM'>AM</option>
  <option value='PM'>PM</option>
</select>

и в вашем классе компонентов

selectedValue = 'AM'; // You may assign 'AM or 'PM' dynamically here

Полезны следующие ссылки:

https://angular.io/api/forms/NgSelectOption

https://angular.io/api/forms/NgModel

Вышеупомянутый метод Углового 2 представляет собой метод с шаблонами. Существует еще один способ сделать то же самое, что и подход реактивных форм, описанный ниже: (вам нужно импортировать ReactiveFormsModule)

<select [formControl]='control'>
  <option>AM</option>
  <option>PM</option>
  </select>

и в вашем классе компонентов

control = new FormControl('AM');

Может оказаться полезной следующая ссылка:

https://angular.io/api/forms/FormControlDirective

Ответ 2

<select [(ngModel)]="defaultValue">
  <option>AM</option>
  <option>PM</option>
</select>

export class MyComponent {
  defaultValue = 'PM';
}

Обычно это делается как

<select [(ngModel)]="defaultValue">
  <option *ngFor="let value of values" [ngValue]="value">{{value}}</option>
</select>

export class MyComponent {
  values = ['AM', 'PM'];
  defaultValue = this.values[1];
}

Подсказка Для нестрочных значений используйте '[ngValue] = "..."

<select [(ngModel)]="defaultValue">
  <option [ngValue]="values[0]">AM</option>
  <option [ngValue]="values[2]">PM</option>
</select>

Ответ 3

Для формы с шаблоном я сделал это и получил выбор по умолчанию.

<select [(ngModel)]="defaultOption" name="identification">
                <option [value]=null>Select</option>
                <option *ngFor="let option of identification" [value]="option.id"> {{ option.name }} </option>
              </select>

и в файле component.ts,

   identification = [
    { id: 1, name: 'Passport'},
    { id: 2, name: 'Adhaar'},
    { id: 3, name: 'Driver\ license'},
    ];
    defaultOption = null;

При загрузке мы могли бы выбрать Select по умолчанию.

Ответ 4

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

Краткий ответ:

используйте [selected] = "isSelected" в вашем теге option!

Решение:

<select>
  <option [selected]="isSelected">AM</option>
  <option>PM</option>
</select>

Источник:

https://medium.com/@phismonster/set-default-value-for-select-in-angular-2-27f0da413935

Изменить 1: Пример с массивом:

arr = [{str: 'A', isSelected: false},
{str: 'B', isSelected: true},
{str: 'C', isSelected: false},
{str: 'D', isSelected: false},
];

<select>
    <option *ngFor="let a of arr" value="a.str" [selected]="a.isSelected">{{a.str}}</option>
</select>

ссылка с рабочим примером: https://stackblitz.com/edit/selected-test

Ответ 5

В файле шаблона:

 <select name="AMPMTime" [(ngModel)]="aMPMTime.time" #aMPMTime="ngModel">
      <option [ngValue]="0">AM</option>
      <option [ngValue]="1">PM</option>
 </select>

В файле Component.ts:

ngOnInit() {
    this.aMPMTime.time= 0;
}

И выбор элемента управления будет по умолчанию выбрать в "AM".

Ответ 6

Должен работать, попробуйте это

<select>
  <option [selected]='a=="None"'>None</option>
  <option [selected]='a=="AM"'>AM</option>
  <option [selected]='a=="PM"'>PM</option>
</select>

//in .ts file
a='PM'

Этот метод более выгоден в том случае, если вы определяете свои параметры с помощью цикла ie *ngFor, вам просто нужно добавить атрибут [selected] и связать значение в своем классе

PS: этот метод эффективен как в статическом, так и в динамическом привязке.

Ответ 7

        <select>
            <option [ngValue]="null">All</option>
            <option *ngFor="let oneItem of items" [ngValue]="oneItem.id">
               {{oneItem.description}}
            </option>
        </select>

Просто добавьте опцию в список. Это сработало для меня в Angular 4.

Ответ 8

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

export class MyComponent {
  someList:Array<any> = ['apples','banana','oranges'];
  myModel: Array<any> = [];
}


<div *ngFor="let list of someList; let i = index;">
  <select  [(ngModel)]="myModel[i]" class="form-control">
    <option [value]="undefined">DEFAULT</option>
    <option [value]="'a'">A</option>
    <option [value]="'b'">B</option>
  </select>
 </div>

Ответ 9

/** All includes */

@Component({
              selector: 'app-select',
              template: '

          <form [formGroup]="select_form">

              <select *ngFor="let item of select_options" 
               formControlName="select_control">
                 <option value=="-1">Select one option ... </option>
                 <option value="{{item.id}}">{{item.text}}</option>
              </select>

              <button type="button" (click)="setActive("-1")"></button>

          </form>
              '
})

    export class SelectComponent extends OnInit{
        private select_form: FormGroup;
            select_options: any[] = 
            [{id: 1, text: "Text 1", id: 2,  text: "Text 2"}];

        constructor(private builder: FormBuilder){

        }

        ngOnInit(){
          this.init();
        }

        init(){
          this.select_form= this.builder.group({
             select_control: new FormControl("1", [/** Validation */])
          });
        }

        setActive(active_value: string){
           this.select_form.get('select_control').patchValue(active_value);
        }
    }

Ответ 10

<select [(ngModel)]="selectedValue">
  <option value="selectOptions" disabled="disabled">---Select Options---</option>
  <option *ngFor="let somevalue of somevalues" [value]="somevalue">{{somevalue}}</option>
</select>

export class MyComponent {
  ngOnInit() {
   somevalues= ['abc', 'def','ghi'];
   selectedValue= "selectOptions";
  }
  someFunction() {
     // process selected option 
     var selection = selectedValue;
     :
     :
     //reset selectedValue to "--Select Options--"
     selectedValue = "selectOptions";
  }

}

Ответ 11

options = [
  {
    name : 'Option A',
    value : 1
  },
  {
    name : 'Option B',
    value : 2
  },
  {
    name : 'Option C',
    value : 3
  }
];
placeHolder = 'select option';

<div>
  <label>Label:</label>
  <select>

    <option [value]="null" ngValue="null" hidden>{{placeHolder}}</option>
    <option *ngFor="let option of options"
            [ngValue]="option.value">{{option.name]}}
    </option>
  </select>
</div>

Ответ 12

сюда:

<select [(ngModel)]="Value">
  <option disabled selected value="">AM</option>
  <option >PM</option>
</select>