角度2から<select>デフォルト選択オプション

Question

マイテンプレートを設定するには、どのように私は、デフォルトで選択されたオプションのAMを設定することができますどのようにこの

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

のようなものですか？

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の方法は、テンプレート駆動型フォーム法です。

control = new FormControl('AM'); 

を

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

（あなたがReactiveFormsModuleをインポートする必要があります）と、あなたのコンポーネントクラスに次のリンクが有用である可能性があります：反応性形は怒鳴る説明した手法である同じことを行うための別の方法があります

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' 

このメソッドは、ループすなわち*ngForを使用して、オプションをgenratingしている間の場合よりbenefitialで、あなたは自分のクラスに値を[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; 

デフォルトで選択されたとして、我々は選択し得ることができます。