Selecting value in Optionset (Angular 2.4.5)

Question

I have a model "currentProject" that contains some text-properties and has 1 property of another complex model , exposed by "energiePeil".

The second model is not that complex and looks like this :

export class EnergiePeil {
    niveau: string;
    epeil: number;   
}

I have the necessary Read-functionality to retrieve the entire parent-model and all its properties (including the child-model) and I have an EnergiePeil[] member "energiePeillen" to list all possible values of the second model. When displaying the parent-model , I display some values of the parent-model but I also want to display the value of the submodel. Showing the entire list of EnergiePeil works correctly, however when opening the form the option does not select the correct value!

<div class="form-group">
    <div class="col-md-4">
        <select class="form-control" id="energiePeil"
                required
                [(ngModel)]="currentProject.energiePeil" name="energiePeil"
                #energiePeil="ngModel">
            <option *ngFor="let epeilVar of energiePeillen" [ngValue]="epeilVar" [value]="epeilVar.niveau">{{epeilVar.niveau}}</option>
        </select>
        <div [hidden]="energiePeil.valid || energiePeil.pristine" class="alert alert-danger">
            Energiepeil is required
        </div>
    </div>
</div>

What am I doing wrong here? I have tried to use [selected] but this would not work neither..

<option *ngFor="let epeilVar of energiePeillen" [ngValue]="epeilVar" [selected]="epeilVar.niveau === currentProject.energiePeil.niveau">{{epeilVar.niveau}}</option>

Could be possible duplicate of http://stackoverflow.com/questions/43349076/set-value-of-selected-in-dropdown-in-angular-2/43349925#43349925 — elpddev, Apr 22 '17 at 15:28
hi @elpddev : I don't think so , i would like to use [ngValue] & [(ngModel)] model — Jens, Apr 22 '17 at 18:50
@Jens Could you reproduce this issue in a plunker? Tried your code and it seemed to work fine for me... — AT82, Apr 23 '17 at 07:53
Hi @AJT_82 : the code can be found on plunker http://plnkr.co/edit/7t7dOXwQriec7WHEK94I?p=preview — Jens, Apr 25 '17 at 18:33

score 1 · Accepted Answer · answered Apr 25 '17 at 18:57

1

Since epeilVar and currentProject.energiePeil are two different variables, currentProject.energiePeil value cannot found from the energiePeillen. You need to create a referece between these two variables so that we can sort of bind them together.

Your code in Plunker is probably mock, so how and where you make the reference must be applied on how your code looks like. In the Plunker it's easy to do in ngOnInit.

So we create the reference, by finding the item from the energiePeillen that matches the value you have in your variable and create a reference between them two (with =), so now that value you have in currentProject.energiePeil has a reference to the item in the array, which means now it can be recognized and bound to the select. So this is how I did it in ngOnInit:

this.currentProject.energiePeil = 
  this.energiePeillen.find(x => x.niveau == this.currentProject.energiePeil.niveau)

Your forked

Plunker

Also what I did was to remove [value]="epeilVar.niveau" from your select. You are already using ngValue that binds the whole object :)

answered Apr 25 '17 at 18:57

AT82

71,416
24
140
167

Thanks @AJT_82 . I use ngOnInit to populate both currentProject from webservice & the "energiePeillen" from another webservice. To create the reference, I need to wait for both promises to be resolved. What is the recommended way for doing this? – Jens Apr 25 '17 at 19:40
ngOnInit(): void { this.route.params .switchMap((params: Params) => this.projectService.getProjectById(params['id'])) .subscribe(project => { if (project) { this.currentProject = project; // project found and set it to current project } else { this.currentProject = new Project(); // project not found and create new project } }); – Jens Apr 25 '17 at 20:29
this.referentieDataService.getEnergiePeil() .then(energiePeil => this.energiePeillen = energiePeil)); } – Jens Apr 25 '17 at 20:29
Notice that I am getting the project by using an observable and the collection by using a Promise. I would need to chain the two together to create the reference successfully. – Jens Apr 25 '17 at 20:30
Yes, you need to chain them and then when the second is request is ready you make the reference in the callback (`subscribe` or `then`). Here is sample: http://plnkr.co/edit/oFPtxYV3zAOluT4nL9bF?p=preview I have used Observables in both, but you just make the appropriate changes :) – AT82 Apr 26 '17 at 05:40

Selecting value in Optionset (Angular 2.4.5)

1 Answers1

Plunker