在通过 Angular 2 可观察数据加载后，如何 select/init html select 选项中的第一个值？

Question

我有一个 html select，其选项如下所示：

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

roles[] 在我的服务的可观察对象订阅中被分配。一切正常，除了 select 最初是空的，即使在加载 roles[] 之后也是如此。当从服务加载 roles[] 时，我希望 select 下拉菜单立即显示第一个选项。然后也进行更改 "role"。

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

如果这很重要，请提供订阅代码：

 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);

在通过 Angular 2 可观察数据加载后，如何 select/init html select 选项中的第一个值？

How to select/init first value in html select option after data loads thru Angular 2 observable?

html-select

angular2-services

angularjs-ng-init

angular2-ngmodel