Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular2 selected option with objects

I have an Angular 2 app that is dealing with customers and a spring rest back end. The customer object has a customer type, which is also an object, and I have the drop down on the customer form working so that objects are stored as the value, however I can't figure out how to select the correct customer type when an existing customer is loaded into the form.

<select  class="form-control" required [(ngModel)]="customer.customerType" >
   <option *ngFor="let ct of customerTypes" [ngValue]="ct">{{ct.customerType}}</option>
</select>

In the above snippet if the customer already has a customer type, then the dropdown won't select any value. I remember having the same problem with angular1 which was solved using ngOptions:

<select ng-model="customer.customerType"
        ng-options="customerType.customerType for customerType in customerTypes 
        track by customerType.customerType" >
</select>

So, my question is, how to replicate the way Angular1 solved this problem in Angular 2

like image 927
Drew Avatar asked Jun 09 '16 20:06

Drew


1 Answers

I had the same Problem and i solved it this way:

<select  class="form-control" required [(ngModel)]="customer.customerType" >
   <option *ngFor="let ct of customerTypes" 
        [ngValue]="ct"   
        [attr.selected]="customer.customerType.customerType==ct.customerType ? true : null"
       >{{ct.customerType}}</option>
</select> 

Thanks to Günter Zöchbauer

like image 116
Christoph Avatar answered Oct 21 '22 23:10

Christoph