Question

user.ts

export class User {
  ....
  roles: Role[]
}

<select name="roles" class="form-control role_select" [(ngModel)]="user.roles">
        <option value="null" >Select role</option>
        <option *ngFor="let role of roles" [value]="role.id">  
            {{role.title}}
        </option>

      </select>

它工作正常但没有选择角色。用户数据就像这样

Roles: Array[1]
username: "vsdfsdfsdfds"

更新代码，问题是，当我设置user.roles时，它会提供Property 'Roles' does not exist on type 'User'

setUser(user: User): void {
  this.user = user;
  this.user.roles = user.Roles;
}

public ngOnInit(): void {        
  this.userSubscription =    this.userService.getuserdetail(this.route.params['_value']['id']).subscribe(user => {            
  this.setUser(user);                              
});

Answer 1

像

这样的东西

ngOnInit() {
  this.user.roles = this.Roles[0];
}

Answer 2

In this case I would use interfaces, there is no need to use classes

所以请改用接口：

export interface User {
  username: string;
  roles: Role[];
}

并且您可以完全跳过setUser - 方法，您可以将值分配给订阅中的user：

.subscribe(user => {
  this.user = {username: user.username, roles: user.Roles}
});

当您第一次分配用户的内容并在此之后分配roles时，您最终会收到错误的用户内容。当我尝试它时，我最终得到了一个对象，其中包含Roles和roles数组。

然后你的模板需要进行一些更改，因为数据是异步的，我们也将选择包装在*ngIf中。

<div *ngIf="user">
  <select [(ngModel)]="user.roles">
    <option value="null" >Select role</option>
    <option *ngFor="let role of user.roles">  
        {{role.title}}
    </option>
  </select>
</div>

请注意，角色的迭代是*ngFor="let role of user.roles"

希望这有帮助！

使用angular2中的ngmodel选择选项

2 个答案: