在angular2中使用ngmodel选择选项

Question

用户名

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

在这种情况下，我将使用接口，而无需使用class 。

因此，请改用接口：

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"

希望这可以帮助！

Answer 3

该函数的参数不能属于User类，因为它具有Roles属性。 在用户类中，您只有角色属性。 字母的大小在JS和TS中很重要。

setUser(user: any): void {
  this.user = user.username; // 
  this.user.roles = user.Roles;
}