如何在angular2中按照以下要求实现下拉菜单

Question

默认情况下，我想在下拉列表中设置值：{{getTeamName(employee.team)}} 并绑定来自{{team.$value}} 的值。

<div class="form-group">
    <label for="team">Designation</label>
    <select [(ngModel)]="selectedValue" [ngModelOptions]={standalone:true}">
        <option *ngFor="let team of teams">{{team.$value}}</option>
    </select>
</div>

功能：

getTeamName(key) {
    let result = this.teams.filter(item => item.$key == key);
    if (result.length > 0) {
        return result[0].$value;
    }
    return '';
}

Answer 1

您可以直接考虑绑定emplyee.team 以在ngModel 中预填充team 对象，并在选项级别使用[ngValue]="team" 在下拉列表中填充team 值。不确定team.$value 是什么，我假设你想显示team.name。

<div class="form-group">
   <label for="team">Designation</label>
   <select [(ngModel)]="employee.team" [ngModelOptions]={standalone:true}">
       <option [ngValue] *ngFor="let team of teams">{{team.name}}</option>
   </select>
</div>

Answer 2

  <select [(ngModel)]="employee.team" [ngModelOptions]="{standalone: true}">
      <option *ngFor="let team of teams"  [value]="team.$key" [selected]="employee.team == team.$key" >{{team.$value}}</option>
  </select>