web-dev-qa-db-fra.com

Sélectionnez la valeur d'option par défaut dans TypeScript angular 6

J'ai un code HTML de ce type:

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

Comment sélectionner la valeur par défaut dans TypeScript, par exemple 47?

angulartypescriptdropdown
7
bramzoti

Tu peux 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 jouer avec ça.

11
Shadab Faiz

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
}
8
Fartab

La manière correcte 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 cela définira la valeur par défaut du champ de sélection. La sélection par défaut doit être liée avec [(ngModel)] et les options doivent être déclarées de la même manière.

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

J'ai eu des problèmes similaires avec Angular6. Après avoir traversé de nombreux postes. J'ai dû importer FormsModule comme ci-dessous dans app.module.ts.

import {FormsModule} from '@angular/forms';

Ensuite, mon tag ngModel a fonctionné. S'il vous plaît essayez ceci. 

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

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" 
}
1
Sajeetharan