在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;
}