it-swarm.com.de

Wählen Sie den Standardoptionswert aus TypeScript angle 6

Ich habe eine ausgewählte HTML-Datei:

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

Wie kann ich den Standardwert von TypeScript für beispielsweise 47 auswählen?

7
bramzoti

Du kannst das:

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

Hier kannst du mitspielen.

11
Shadab Faiz

Für reaktive Form habe ich es mit dem folgenden Beispiel geschafft, dass es funktioniert (47 kann durch einen anderen Wert oder eine andere Variable ersetzt werden):

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

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

Richtiger Weg wäre: 

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

Wert Sollte innerhalb der Option vermieden werden, wenn der Wert dynamisch sein soll, da dadurch der Standardwert des 'Auswahlfelds' festgelegt wird. Default Selection sollte mit [(ngModel)] gebunden werden, und Options sollten ebenfalls deklariert werden.

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

Ich denke, der beste Weg, um es mit ngModel zu binden.

<select name="num" [(ngModel)]="number">
                <option *ngFor="let n of numbers" [value]="n">{{n}}</option>
              </select>

und in ts datei hinzufügen

number=47;
numbers=[45,46,47]
1
user9292877

Ich hatte ähnliche Probleme mit Angular6. Nachdem ich viele Posts durchgegangen bin. Ich musste FormsModule wie folgt in app.module.ts importieren.

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

Dann funktionierte mein ngModel-Tag. Bitte versuchen Sie das. 

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

Zuerst oder alles, was Sie verwenden, ist ng-model, das als Winkeljs-Syntax betrachtet wird. Verwenden Sie stattdessen [(ngModel)] mit dem Standardwert

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

das schaffe ich so =>

<select class="form-control" 
        [(ngModel)]="currentUserID"
        formControlName="users">
        <option value='-1'>{{"select a user" | translate}}</option>
            <option 
            *ngFor="let user of users"
            value="{{user.id}}">
            {{user.firstname}}
   </option>
</select>
0