角2：選択された要素から提出するオブジェクトにオブジェクトを渡します。

Question

こんにちは私は角2を初めて使っています。私はしばらくこの問題を解決する良い方法を模索しています。だから私は内部に別のオブジェクトを含むユーザーオブジェクトを持っています。そのユーザーはインターフェイスです

export interface userModel{ 
    name: string, 
    service: Service 
} 

新しいユーザーを作成するためのサービスとフォームの配列があります。

<form #f="ngForm" (submit)="addUser(f.value,f.valid)"> 
    <label for="name" class="col-sm-1 control-label">Name</label> 
    <div class="col-sm-4"> 
     <input class="form-control" [(ngModel)]="userModel.name" #name="ngModel" name="name" ng-maxlength="49" /> 
    </div> 
    <label class="col-sm-1 control-label">Service</label> 
     <select class="form-control" name="service" [(ngModel)]="userModel.service"> 
      <option *ngFor='let service of services' [value]='service'>{{service.name}}</option> 
     </select> 
    </div> 
    <button class="btn btn-primary" type="submit">Create</button> 
</form> 

どのように私は選択したサービスオブジェクトをユーザーオブジェクトに渡すことができますか？私はこれを記入すると、私は得る：

Object{ 
    "name": "something", 
    "service": "[Object object]" 
} 

明らかに私は要素を選択する値としてオブジェクトを渡すことはできません。 それから私は代わりにその値をサービスのidに設定しました。

export interface UserModel{ 
    name: string, 
    serviceId: number 
} 

そして提出する前に、私はサービスの配列にそのIDによってサービスオブジェクトを検索し、内部のサービスオブジェクトとUserオブジェクトでそれを設定します。 は、インタフェースを修正します。

userModel: UserModel; 
user: User; 

submit(model: UserModel){ 
    this.user = { 
    name : model.name, 
    service: this.findService(model.serviceId) 
    } 
} 



ngOnInti(){ 
this.userModel= <userModel>{}; 
} 

これは問題ありませんか？これを管理するより良い方法はありますか？これは実際の例であり、（手書き）コードの一部です。ありがとう

Answer 1

valueオブジェクトを文字列化する属性があるため、[Object object]が格納されています。オプションの選択にオブジェクト値を格納する場合は、[value]の代わりに[ngValue]を使用する必要があります。基本的には[ngValue]プロパティは&のオブジェクトの値を保持し続けます。

マークアップ

<select class="form-control" name="service" [(ngModel)]="userModel.service"> 
    <option *ngFor='let service of services' [ngValue]='service'> 
    {{service.name}} 
    </option> 
</select>