Sélectionner la valeur de l'option par défaut de typescript angular 6

Question

J'ai une sélection html comme ceci :

<select ng-model='nrSelect' class='form-control'>                                                                
    <option value='47'>47</option>
    <option value='46'>46</option>
    <option value='45'>45</option>
</select>

Comment puis-je sélectionner la valeur par défaut à partir de typescript, par exemple 47 ?

Answer 1

Vous pouvez le faire :

<select  class='form-control' 
        (change)="ChangingValue($event)" [value]='46'>
  <option value='47'>47</option>
  <option value='46'>46</option>
  <option value='45'>45</option>
</select>

// Note: You can set the value of select only from options tag. In the above example, you cannot set the value of select to anything other than 45, 46, 47.

Ici, vous pouvez plier avec ça.

Answer 2

app.component.html

<select [(ngModel)]='nrSelect' class='form-control'>
  <option value='47'>47</option>
  <option value='46'>46</option>
  <option value='45'>45</option>
</select>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  nrSelect = 47
}

Answer 3

Pour le formulaire réactif, j'ai réussi à le faire fonctionner en utilisant l'exemple suivant (47 peut être remplacé par une autre valeur ou variable) :

<div [formGroup]="form">
  <select formControlName="fieldName">
    <option
        *ngFor="let option of options; index as i"
        [selected]="option === 47"
    >
        {{ option }}
    </option>
  </select>
</div>

Answer 4

La bonne façon serait :

<select id="select-type-basic" [(ngModel)]="status">
    <option *ngFor="let status_item of status_values">
    {{status_item}}
    </option>
</select>

La valeur doit être évitée dans l'option si la valeur doit être dynamique, car elle définira la valeur par défaut du "champ de sélection". La sélection par défaut doit être liée à [(ngModel)] et les options doivent être déclarées de la même manière.

status : any = "47";
status_values: any = ["45", "46", "47"];

Answer 5

Tout d'abord, vous utilisez ng-model qui est considéré comme une syntaxe angularjs. Utilisez [(ngModel)] à la place avec la valeur par défaut

App.component.html

<select [(ngModel)]='nrSelect' class='form-control'>
    <option value='47'>47</option>
    <option value='46'>46</option>
    <option value='45'>45</option>
</select>

App.component.ts

import { Component } from '@angular/core'; 
@Component({ 
    selector: 'my-app', 
    templateUrl: './app.component.html', 
    styleUrls: [ './app.component.css' ] 
}) 

export class AppComponent { 
    nrSelect:string = "47" 
}