web-dev-qa-db-ja.com

TypeScript angular 6からデフォルトのオプション値を選択します

私はこのようなセレクトHTMLを持っています：

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

TypeScriptからデフォルト値47を選択するにはどうすればよいですか？

angulartypescriptdropdown
18
bramzoti

あなたはこれを行うことができます：

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

ここで、これで遊ぶことができます。

18
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
}
10
Fartab

リアクティブフォームの場合、次の例を使用して機能させることができました（47は他の値または変数に置き換えることができます）。

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

正しい方法は次のとおりです。

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

値が「Select field」のデフォルト値を設定するため、値が動的である場合、オプション内では避ける必要があります。デフォルトの選択は[（ngModel）]にバインドされ、オプションも同様に宣言される必要があります。

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

まずは、angularjs構文と見なされるng-modelを使用しています。代わりにデフォルト値で[(ngModel)]を使用してください

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

私はそれをngModelにバインドするための最良の方法だと思います。

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

tsファイルに追加

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

Angular6でも同様の問題がありました。多くの投稿を行った後。 app.module.tsで以下のようにFormsModuleをインポートする必要がありました。

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

その後、私のngModelタグが機能しました。これを試してください。

<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

私はこれを次のようにして管理します=>

<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
Abdelwahed Houbouby