JSON Object as Select value - Angular 2

Question

JSON Object as Select value - Angular 2

Navigation

#1 by (1 votes)

0

Object

export class Car {
  ID: String;
  dors: [{
    number: Number,
    postion: {
        x: String,
        y: String,
        z: String,
    }
  }]

}

It is possible to define the value of a select as an object and not a simple string . I do not mean the object to show but the value . I tried using value={{}} but it seems to only work with string . I tried doing it with ngValue , but it seems not to change the behavior. Is it possible to do it?

I want car.dors.position as value

I tried:

<select *ngIf="car" class="form-control" #oneDoor  (change)="getRecDet(oneDoor.value);"  required >
   <option *ngFor="let oneDoor of car.doors" [ngValue]="oneDoor">{{oneDoor.position}}</option>
</select>

javascript html angularjs-2.0

asked by Mario López Batres 12.01.2018 в 12:50

source

1 answer

I do not want to work the decorator @input in angular YOU ARE LOST POSITION WHEN DOING POSTBACK OF BOOTSTRAP DATEPICKER WITH UPDATEPANEL

score 1 · Answer 1

Do it in the following way, add ngModel .

    <select *ngIf="car" class="form-control" 
            [(ngModel)]="selectedDoor" #selectDoor 
            (change)="getRecDet(selectDoor.value);"  required >
          <option *ngFor="let oneDoor of car.doors" 
                  [ngValue]="oneDoor">
                 {{oneDoor.position}}
          </option>
    </select>

selectedDoor is an Object of the Door type, since the option for "default" (preselected), can be an object without value, but d should be of the same type as the Value .

[value]="..." -> Only supports Strings.

[ngValue]="..." - > Supports any Object - You need a ngModel

Remember: add to your Module import { FormsModule } from '@angular/forms';