Angular2 ngFor - 设置选择答案

【问题标题】：Angular2 ngFor - set selectedAngular2 ngFor - 设置选择
【发布时间】：2016-09-07 02:05:40
【问题描述】：

当用户登录我的应用时，它会加载他们之前使用的 UI 设置。要在界面之间切换，有一个下拉列表，其中列出了特定用户有权使用的所有选项。

我希望该列表中的选定选项在页面加载时反映以前的 UI，但我无法想出如何设置选定的 <option>

下面是一些示例代码：

//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>

在 Angular2 中，如何在选项上设置 selected 参数以反映 user.previousUI？

我尝试添加这个：

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

但这似乎并没有做到。

【问题讨论】：

标签： javascript angular

【解决方案1】：

一种方法是

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

【讨论】：