Angular 更新可观察对象时出错"；角色[0]未定义"；

我有这个映射用户*角色

知道

导出类用户
{
id：编号；
名称：字符串；
角色：角色[]；
}
导出类角色
{
id：编号；
名称：字符串；
}

我想更新一个用户。以下是所需的文件：

修改user.component.html

角色
{{role.name}
名称
使现代化

和用户修改.component.html

导出类ModifyUserComponent实现OnInit
{
编辑形式：FormGroup；
提交=错误；
私有选择电极；
用户：可观察；
诽谤角色：字符串；
usrId：字符串；
selectedRoleUserCompare={num:localStorage.getItem（“selectedRoleId”），name:localStorage.getItem（“selectedRoleName”）}
roleName：字符串；
罗莱斯：阵列=
[
{num:1，名称：“角色\用户”}，
{num:2，名称：“ROLE_PM”}，
{num:3，名称：“ROLE_ADMIN”}
];
比较n（a，b）
{
log（a，b，a&&b&&a.num==b.num）；
返回a&&b&&a.num==b.num；
}
构造函数（私有formBuilder:formBuilder，私有路由器：路由器，私有userService:userService）{}
恩戈尼尼特（）
{
this.roleName=localStorage.getItem（“roleLibelle”）；
让userId=localStorage.getItem（“editUserId”）；
this.usrId=localStorage.getItem（“editUserId”）；
如果（！userId）
{
警报（“无效操作”）
this.router.navigate（['users-list']）；
回来
}
this.userService.getUserEntityId（+userId）.map（se=>se.roles[0].name）.subscribe（（响应）=>
{
this.libelleRole=响应；
setItem（“rolebelle”，this.libelle角色）；
});
this.editForm=this.formBuilder.group
({
id:[]，
名称：[''，验证器。必需]，
用户名：[''，验证器。必需]，
电子邮件：[''，验证器。必填]，
密码：[''，验证程序。必需]，
年龄：[''，验证器。必填]，
活动：['false']
});
this.userService.getUserId（+userId）.subscribe（数据=>
{
this.userService.getUserEntityId（+userId）.map（se=>se.roles[0].name）.subscribe（name=>
{
this.libelleRole=名称；
此.editForm.setValue（数据）；
});
});
}
onChangeRoleName（$event）
{
this.selectedRole=$event.target.options[$event.target.options.selectedIndex].text；
}
newUser（）：void
{
this.submitted=false；
}
onSubmit（）
{
this.userService.updateUserSera（this.editForm.value，this.selectedRole）.subscribe（数据=>
{
this.router.navigate（['users-list']）；
},
错误=>
{
警报（错误）；
});
}
}

而

updateUserSera

内部user.service.ts的功能是：

updateUsera（用户：用户，角色名称：字符串）
{
让userId=localStorage.getItem（“editUserId”）；
返回this.http.put（`${this.baseUrl}/users`++'/'+userId++'/'+roleName，user）；
}

更新成功完成。 但是，当从

列表users.components.html

导航到

修改user.component.ts

时，我有两个错误：

• 第一个问题：恢复后的角色是错误的。真正的角色是

  管理员角色

  ，但这里有

  用户角色

  （它通常显示第一个 名单的作用）
• 第二个问题：当我从用户列表中选择一个用户来修改它时（当从用户列表中导航来修改所选用户时），我得到了这个问题

你能帮我解决那个问题吗？。

---

提前感谢。

您必须定义角色[0]。 我不知道为什么要使用第一个索引，因为它通常会给出第一个值，正如您所描述的那样，这是错误的。 因此，请尝试

rol:[this.selectedRoleUserCompare.num，Validators.required]

内部

this.editForm=this.formBuilder.group

然后将其替换到html文件中：

<div class="form-group">
              <label for="name">Role</label>
              <select (change)="onChangeRoleName($event)" class="form-control select2" style="width: 100%;" formControlName="rol">
                  <option *ngFor="let role of roles" [ngValue]="role.num">{{role.name}}</option>
              </select>
            </div>

角色
{{role.name}

嗯