web-dev-qa-db-ja.com

Angular 4-選択リストのオプション値にオブジェクトを使用する

同様の質問が出されたことは知っていますが、良い答えのないものは見つかりませんでした。各オプションの値がオブジェクトであるAngularフォームで選択リストを作成します。また、2方向のデータバインディングを使用したくありません。例えばコンポーネントに次のフィールドがある場合：

 
 lUsers：any [] = 
 {名前： 'Billy Williams'、性別： '男性'}、
 {名前： 'Sally Ride'、性別： '女性'} 
; 
 curUser：any;

HTMLテンプレートにこれを含めたい：

 
 <select #selectElem（change）= "setNewUser（selectElem.value）"> 
 <option * ngFor = "let User of lUsers" [ngValue] = "user" > 
 {{user.Name}} 
 </ option> 
 </ select>

ただし、このコードでは、setNewUser（）関数は選択したユーザーの[名前]フィールドの内容を受け取ります。なぜその特定の分野を選ぶのか、私にはわかりません。私が期待するのは、選択したオプションの「値」を受け取ることです。これは、ユーザーオブジェクトに具体的に設定します。

オプションで値の代わりにngValueを使用したことに注意してください。それはSOに関する他者の提案によるものでした。代わりに値を使用すると、オブジェクトが文字列「[オブジェクトオブジェクト]」に変換されます。これはsetNewUser（）が受け取るものであり、役に立たないものです。

参考までに、私はWindows 10でangular 4.0.0と@ angular/cli 1.1.2を使用しています。 setNewUser（）メソッドを次に示します。

 
 setNewUser（user：User）：void {
 
 console.log（user）; 
 this.curUser = user; 
} // setNewUser（）

ログに記録することと、テンプレートにこれを含めることの両方で、正確に何が渡されているのかを判断しています：<pre>{{curUser}}</pre>

angularangular-forms
24
user1738579

現在[ngValue]を使用していますが、オブジェクトは問題なく保存されます。

(change)の代わりに(ngModelChange)を使用して問題が発生した理由に関する説明は、 この質問 にあります。

したがって、すでに[ngValue]を使用しているため、おそらくngModelChangeディレクティブを使用できるように一方向のバインディングのみを使用するこのようなことをしたいと思うでしょう。

<select (ngModelChange)="setNewUser($event)" (ngModel)="lUsers">
        <option *ngFor="let user of lUsers" [ngValue]="user">
            {{user.Name}}
        </option>
    </select>

そして、tsファイルはイベントをキャプチャし、idで追跡する必要なくUserオブジェクトを受け取ります。基本的には、古いメソッドを再利用するだけで十分です。

setNewUser(user: User): void {
    console.log(user);
    this.curUser = user;
    }
34
Steven

valueタグのoption属性ではオブジェクト全体を保存できないため、id配列に新しいプロパティlUsersを作成して、選択したアイテムを追跡します。

HTML

<select #selectElem (change)="setNewUser(selectElem.value)">
    <option *ngFor="let user of lUsers" [value]="user.id">
        {{user.Name}}
    </option>
</select>

これにより、変更時に一意のidがsetNewUser関数に渡されます。

あなたのcomponent.tsで：

...

lUsers: any[] = [
    { id: 1, Name: 'Billy Williams', Gender: 'male' },
    { id: 2, Name: 'Sally Ride', Gender: 'female'}
];
curUser: any = this.lUsers[0]; // first will be selected by default by browser

...

setNewUser(id: any): void {
    console.log(id);
    // Match the selected ID with the ID's in array
    this.curUser = this.lUsers.filter(value => value.id === parseInt(id));
    console.log(this.curUser);
}

上記のコードの plnkr デモがあります。開発者ツールを開いて、コンソールログを表示します。

19
Dhyey

-Elementsでは[value]の代わりに[ngValue]を使用できます。わたしにはできる。

私はここでその情報を見つけました： https://www.reddit.com/r/Angular2/comments/65run4/select_option_using_value_vs_ngvalue/

4
Dieter Rehbein

6角形を簡単に実行

HTML

<div class="col-3" style="float:left;padding-left: 18px !important;">
      <label>Vehicle No.</label>
      <div *ngIf="gpsDevicesArray && gpsDevicesArray.length > 0">
            <select [ngModel]="selectedVehicle" style="padding: 7px;border-radius: 4px;"
                    (ngModelChange)="onVehicleNumberChange($event)">
                    <option *ngFor=" let device of gpsDevicesArray" [ngValue]="device">
                        {{device.vehicleNumber}}
                    </option>
            </select>
      </div>
</div>

TypeScript

//初期値の場合（この行をサーバー呼び出し関数内に入れます）

 this.selectedVehicle = gpsDevicesArray[0];

//リスナー

 onVehicleNumberChange(device) {
        console.log("selectedVehicle ====", device);
 }
2
kumar kundan