角2 - 如何设置默认<select>选择的选项

Question

我的模板是这样

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

如何设置默认选择的选项AM？

Answer 1

旧的纯HTML的方式简单地Angular2工作，如果你不想做动态的东西：

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

但是以下的角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

Answer 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> 

Answer 3

应该工作，试试这个

<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' 

这种方法是当你在genrating使用循环即*ngFor你的选择的情况下，更多的，这有利于，你只需要在你的类添加[selected]属性，绑定值

PS：这个方法是静态的高效以及动态捆绑。

Answer 4

我的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> 

Answer 5

/** 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); 
     } 
    } 

Answer 6

对于一个模板驱动的形式，我这样做，并得到默认的选择。

<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\'s license'}, 
    ]; 
    defaultOption = null; 

上的负载，为默认选择，我们可以得到选择。