角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; 

上的負載，爲默認選擇，我們可以得到選擇。