更新可观察到的“ roles [0]未定义”时出错

米萨尔

我有此映射用户* --------------- *角色

知道

export class User
{
    id: number;
    name: string;
    roles: Role[];
}

export class Role
{
    id: number;
    name: string;
}

我要更新一个用户。波纹管是必需的文件:

Modify-user.component.html

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

        <div class="form-group">
            <label for="name">Name</label>
            <input type="text" formControlName="name" placeholder="Name" name="name" class="form-control" id="name">
        </div>

        <button class="btn btn-success">Update</button>
    </form>

user-modify.component.html

export class ModifyUserComponent implements OnInit
{

  editForm: FormGroup;
  submitted = false;
  private selectedRole;
  users: Observable<User[]>;
  libelleRole: string;
  usrId: String;
  selectedRoleUserCompare = {num: localStorage.getItem("selectedRoleId"), name: localStorage.getItem("selectedRoleName")}
  roleName: String;
  rolees:Array<Object> =
  [
      {num: 1, name: "ROLE_USER"},
      {num: 2, name: "ROLE_PM"},
      {num: 3, name: "ROLE_ADMIN"}
  ];

  compareFn(a, b)
  {
    console.log(a, b, a && b && a.num == b.num);
    return a && b && a.num == b.num;
  }

  constructor(private formBuilder: FormBuilder, private router: Router, private userService: UserService) {}

  ngOnInit()
  {
      this.roleName = localStorage.getItem("roleLibelle");

      let userId = localStorage.getItem("editUserId");
      this.usrId = localStorage.getItem("editUserId");
      if(!userId)
      {
          alert("Invalid action.")
          this.router.navigate(['users-list']);
          return;
      }

      this.userService.getUserEntityId(+userId).map(se=> se.roles[0].name).subscribe((response)=>
      {
          this.libelleRole = response;
          localStorage.setItem("roleLibelle", this.libelleRole);
      });


      this.editForm = this.formBuilder.group
      ({
          id: [],
          name: ['', Validators.required],
          username: ['', Validators.required],
          email: ['', Validators.required],
          password: ['', Validators.required],
          age: ['', Validators.required],
          active: ['false']
      });

      this.userService.getUserId(+userId).subscribe( data =>
      {
          this.userService.getUserEntityId(+userId).map(se=> se.roles[0].name).subscribe(name=>
          {
              this.libelleRole = name;
              this.editForm.setValue(data);
          });
      });
  }

  onChangeRoleName($event)
  {
      this.selectedRole = $event.target.options[$event.target.options.selectedIndex].text;
  }

  newUser(): void
  {
      this.submitted = false;
  }

  onSubmit()
  {
      this.userService.updateUsera(this.editForm.value, this.selectedRole).subscribe(data => 
      {
          this.router.navigate(['users-list']);
      },
      error =>
      {
          alert(error);
      });
  }

}

并且user.service.tsupdateUsera内部的函数

updateUsera(user: User, roleName: string)
    {
        let userId = localStorage.getItem("editUserId");
        return this.http.put(`${this.baseUrl}/users` + '/' + userId  + '/' + roleName, user);
    }

更新成功完成。但是,从导航list-users.components.html时,我有两个错误modify-user.component.ts

  • 第一个问题:调养的角色是错误的。真正的角色是ADMIN_ROLE,但我在这里USER_ROLE(通常显示该列表的第一个角色)。
  • 第二个问题:当我从用户列表中选择一个用户进行修改时(从列表用户导航以修改所选用户时),出现此错误

您能帮我解决这个问题吗?提前致谢。

莎莉亚·埃西德(Saria Essid)

您必须定义角色[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>

高温超导

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

绑定为可观察到的敲除时如何更新ckeditor数据?

可观察到的类型错误:无法读取未定义的属性

UB上下文中的“可观察到的行为”“未定义行为”

每次在Angular 2中满足条件时,rxJS即可观察到重复调用

角度4可观察到的捕获服务未定义

Angular2可观察到的问题,无法读取未定义的属性“订阅”

角5-可观察到的返回错误无法读取未定义的属性

角度-单击时清除可观察到的

Angular2-单元测试可观察到的错误“无法读取未定义的属性'subscribe'”

更新MutableLiveData时观察到的抛出异常

angular4:使用valueChanges的自定义“等于”验证可观察到

可观察到的更新时,所选选项不会更新,尽管optionsValue确实会更新

任一可观察到的更新时触发代码

等待可观察到的RxJS时在Angular中显示加载指示器

当数组开始为空时,可观察到的数组mobx不会更新

使用接口时出错,并且http解析时可观察到

定义user.id之后可观察到的创建发射

RxJS groupBy通过ngrx效果可观察到的自定义数组

未定义可观察到的异步运算符

自定义模板剑道网格-调用相同的可观察到的

当基础数据源具有新值时,了解可观察到的RxJava

当儿童可观察到的更新时,淘汰赛js css似乎没有重新计算

引用可观察到的自定义html id的敲除

打印单击按钮时可观察到的结果?

从敲除3.2中的自定义组件可观察到的更新

ionic2-设备运动返回可观察到,但退订给出错误

收到错误“ TypeError:无法观察到未定义”

HTTP可观察到的返回未定义/空

序列化rxjs可观察到的自定义业务对象