Angular2 ngFor—已选择集

Angular2 ngFor - set selected

本文关键字：选择 ngFor Angular2      更新时间：2023-09-26

当用户登录到我的应用程序时，它会加载他们使用的以前的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">

但这似乎并没有起到作用。

一种方法是

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