在angular2中动态初始化选择值

Question

I am setting value of select option in a loop . Have a look at the code

<div *ngFor="let sport of sport_data;" class="row">
  <select [(ngModel)]="sports.value" class="form-control">
      <option value="football">Sports</option>
      <option value="cricket">Cricket</option>
  </select>
</div>

Here sport_data is the array of list of sports . Its not working fine . Is their any other way to set default value of select element?

Answer 1

Should the select have a binding to the "sport" variable of the *ngFor? In that case it seems that you have a typo, as you bind the ngModel to "sports" and not "sport". The code should look like this:

<div *ngFor="let sport of sport_data;" class="row">
  <select [(ngModel)]="sport.value" class="form-control">
      <option value="football">Sports</option>
      <option value="cricket">Cricket</option>
  </select>
</div>

As you asked for it, a different approach could be to use the (change) event on the select to set the value and the [selected] binding for the option to be selected.