web-dev-qa-db-ja.com

Angular選択値をintにキャスト

私は次のような異なるセレクトを持つフォームを持っています：

<select [(ngModel)]="selected.isConnected" (ngModelChange)="formChanged()" name="etat" id="etat" class="form-control">
    <option value="0">Not connected</option>
    <option value="1">Connected</option>
</select>

私のバックエンドは、「isConnected」属性でintを受け取ることを期待しています。残念ながら、selectの値を変更するとすぐに、属性が文字列にキャストされます。

{
    isConnected : "0", // 0 expected
}

標準の<input>使用できますtype="number"が<select>私は無知です。

データをintにキャストするためにangular 2を強制する方法はありますか？

formsangularcasting
30
grunk

「値」の代わりに[ngValue]を使用します。

<select [(ngModel)]="selected.isConnected" id="etat">
    <option [ngValue]="0">Not connected</option>
    <option [ngValue]="1">Connected</option>
</select>
80
Anthony Brenelière

formChanged（）メソッド内でキャストしたい場合（まだ提供していない場合）。以下に示すように、+ symbolを使用する必要があります。

formChanged(): void {
    selected.isConnected = +selected.isConnected;
    ...
}
2
micronyks

いいえ、悲しいことに、selectから常に文字列を取得するため、formChanged()メソッドで自分で解析する必要があります。

あなたはこのようなものでそれを試すことができます：

formChanged(): void {
    selected.isConnected = parseInt(selected.isConnected);
    // ...
}
1
rinukkusu

Number変数を送信して、そのselect要素の値を選択して割り当てることができます。次に、値が変更されたときに値をキャプチャする場合は、イベントを追加（変更）して、以下に示すように値を選択および取得できます。

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

@Component({
  selector: 'my-app',
  template: `<select value="{{isConnected}}" (change)="printConnected($event.target.value)" name="etat" id="etat" class="form-control">
          <option value="0">Not connected</option>
          <option value="1">Connected</option>
        </select>
        <div *ngIf="changed">You've selected {{isConnected}}<div>`
})
export class AppComponent {

  isConnected : number = 1;
  changed : boolean = false;
  printConnected(value){
this.isConnected = value;
this.changed=true;
  }

}

http://plnkr.co/edit/xO2mrTdpTGufkgXqdhYD?p=preview で例を表示できます。

0
Gary