html-select - 通过Angular 2 observable加载数据后，如何在html选择选项中选择/初始化第一个值？

Question

我有一个带有如下选项的 html 选择：

<select [(ngModel)]="role" (ngModelChange)="roleChanged($event)">
    <option *ngFor="#role of roles" [ngValue]="role">{{role.Name}}</option>
</select>

角色 [] 在订阅我的服务的 observable 时被分配。一切正常，除了选择最初是空的，即使在加载角色 [] 之后也是如此。我希望选择下拉菜单在从服务加载角色 [] 时立即显示第一个选项。然后也要改变“角色”。

我正在考虑在选择或选项上使用 ngInit，但似乎无法使其正常工作。我还考虑过在返回 observable 后在组件中分配角色，但我无法弄清楚/知道这是否可能，因为在角色 [] 加载之前角色 [0] 始终为空。

如果这很重要，这是订阅代码：

 getDivisonTeamRoles() {
this._divisonProposalService.getDivisionTeamRoles()
                 .subscribe(
                   roles => this.roles = roles,
                   error =>  this.errorMessage = <any>error);

}

Answer 1

我想到了。在 subscribe() 函数中，您可以在那里添加多行代码并调用函数、分配其他变量等。像这样..

.subscribe(
                   roles => { 
                     this.roles = roles;
                     this.role = this.roles[0]; 
                     this.getEmployeesByRole();
                    },
                   error =>  this.errorMessage = <any>error);