Winkel 2 - wie einstellen <select> Standard gewählte Option

Question

Meine Vorlage ist wie dieser

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

Wie kann ich Option AM standardmäßig aktiviert eingestellt?

Answer 1

Die alte reine HTML Art und Weise funktioniert einfach mit Angular2, wenn Sie wollen nicht alles tun, dynamisch: Mai

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

Aber die folgende ist die Angular 2-Wege, die Ihnen ermöglicht, dynamisch ausgewählt Wert zuordnen, die kann der praktische und gemeinsamer Anwendungsfall: (Sie müssen FormsModule importieren)

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

und in der Komponentenklasse

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

Die folgenden Verbindungen können nützlich sein:

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

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

Die oben erwähnte Angular-2-Verfahren ist Verfahren Schablone angetrieben Formen. Es gibt einen anderen Weg, um die gleiche zu tun, die reaktive Formen ist unten beschriebene Ansatz: (Sie müssen ReactiveFormsModule importieren)

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

und in der Komponentenklasse

control = new FormControl('AM'); 

Der folgende Link nützlich sein kann:

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

Answer 2

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

export class MyComponent { 
    defaultValue = 'PM'; 
} 

Normalerweise wie

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

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

Hinweis für den Einsatz nicht-String-Werte getan es `[ngValue] = "..."

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

Answer 3

Sollte funktionieren, versuchen Sie dies

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

Diese Methode ist benefitial bei, während Sie Ihre Optionen sind genrating dh mit Schleife *ngFor, man muss nur [selected] Attribut hinzufügen und binden den Wert in Ihrer Klasse

PS: Diese Methode ist effizient in statischen sowie dynamischen Bindung.

Answer 4

Mein NgModel wurde einem Array zugewiesen und ich konnte keinen Standard für jedes Element im Array festlegen. Standardmäßig sind die Werte undefiniert, so dass Sie Ihren Standardwert für die Option festlegen können.

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

für eine Vorlage getrieben Form, tat ich dies und Standardauswahl bekam.

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

und in der component.ts Datei,

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

Auf Last, könnten wir wählen bekommen als ausgewählten Standard.