Angular2 ngFor-设置为选定

Question

When a user logs in to my app, it loads the previous UI setup that they were using. To switch between interfaces there is a dropdown that lists all the options that specific user is authorized to use.

I would like the selected option in that list to reflect the previous UI when the page is loading but I'm having trouble coming up with how to set the selected <option>

Here is some example code:

//User object from DB
var user = {
  username: admin,
  previousUI: 'Build',
  authorizedUI: [{title:'Default'}, {title:'Edit'}, {title:'Build'}]
}

html:

<form class="navbar-form">
  <label>System: </label>
  <select (change)="systemSelect($event.target.value)">
    <option *ngFor="let system of user.authorizedUI" [value]="system.title">
      {{system.title}}
    </option>
  </select>
</form>

In Angular2 how do I set the selected parameter on the option to reflect user.previousUI ?

I tried adding this:

<option *ngFor="let system of user.authorizedUI" [value]="system.title" [selected]="system.title === user.previousUI">

But that didn't seem to do it.

Answer 1

一种方法是

<select [ngModel]="user?.previousUI" (change)="systemSelect($event.target.value)">