Angular 2 Set begin value of select [duplicate]

1
votes

This is my select code :

   <select class="form-control" [(ngModel)]="selectedPrototypeSelector" (ngModelChange)="onPrototypeChange()">
       <option *ngFor="#p of prototypes" [value]="p.selector">
             {{ p.selectorName }}
       </option>
   </select>

How do I set a standard begin value to this select option I thought i have to set this variable:

 selectedPrototypeSelector: string;

To this: selectedPrototypeSelector: string = "Test";

But the "Test" is not showing first in the select box The begin value is empty, how do I set this for example to: Select your option.

Here a PLUNKER ,

as you can see the select box is empty while i set the value p.selector and the same for the second select where i give the value of constraint:

 <select class="form-control" [(ngModel)]="expression.constraint">
     <option *ngFor="#constraint of prototype.constraints" [value]="constraint">
         {{ constraint }}
     </option>
 </select>

I want to set the begin value of every select box to a static string = "Select an option";

2
typescriptangular
What should be the default value? Where does it come from? A property on the component class or some static string value? - Günter Zöchbauer
@GünterZöchbauer it is just a static string value I edited my question - Sireini
I updated my answer. - Günter Zöchbauer

2 Answers

1
votes

It should work just fine, see plunkr. You either have non-string value in p.selector or it was typo -> [value]="p.selectorName".

1
votes

This works fine with ngValue

<select class="form-control" [(ngModel)]="selectedPrototypeSelector" (ngModelChange)="onPrototypeChange()">
   <option *ngFor="let p of prototypes" [ngValue]="p">
         {{ p.id }}
   </option>
</select>

Just set selectedPrototypeSelector to the value you want to have selected.

Plunker example