Angular 4 ng-select动态默认值

Question

我有一个ng-select组件的表单，它显示了我的Angular 4项目中用户的角色。在该组件中，首先我需要获取用户角色并将它们显示为默认值。为了做到这一点，我在ngOnInit中使用FormControls。因为我从服务中获取默认值，所以根据FormGroup的初始化，它们的加载非常缓慢。我在ngOnInit中调用它们，但每次FormGroup都在之前运行。所以我看不到屏幕上的任何默认值。我试图使它异步，但我无法做到这一点。

ngOnInit() { 
    this.sub = this.route.params.subscribe(params => { 
     this.userTC = params['id']; 
     this.getUserInfo(this.userTC); // This function works second 
    }); 


    // This part works first 
    this.form = new FormGroup({ 
    roles: new FormControl(this.defaultRoles) 
    }); 
} 


getUserInfo(tc) { 
    this.userService.getUser(tc).subscribe(data => { 
    if(data) { 
     let arr = new Array<string>(); 

     for(i = 0; i < data.roles.length; i++) { 
     switch(data.roles[i]) { 
      case "admin" : 
      arr[i] = '1'; 
      break; 
      case "doktor" : 
      arr[i] = '2'; 
      break; 
      case "hasta" : 
      arr[i] = '3'; 
      break; 
      case "lab" : 
      arr[i] = "4"; 
      break; 
     } 
     } 
     this.defaultRoles = arr; 
    } 
    }  
} 

Answer 1

那是因为你的HTTP调用都是异步，你有当通话结束后你的表单组设定值。

 form: FormGroup; 
 
    constructor(private fb: FormBulider){} 
 
    ngOnInit() { 
 
     this.sub = this.route.params.subscribe(params => { 
 
      this.userTC = params['id']; 
 
      this.getUserInfo(this.userTC); // This function works 
 
      second 
 
      
 
     }); 
 

 

 
     // This part works first 
 
     this.form = this.fb.group({ 
 
     roles: '' 
 
     }); 
 
    } 
 
    getUserInfo(tc) { 
 
    this.userService.getUser(tc).subscribe(data => { 
 
    if(data) { 
 
     let arr = new Array<string>(); 
 

 
     for(i = 0; i < data.roles.length; i++) { 
 
     switch(data.roles[i]) { 
 
      case "admin" : 
 
      arr[i] = '1'; 
 
      break; 
 
      case "doktor" : 
 
      arr[i] = '2'; 
 
      break; 
 
      case "hasta" : 
 
      arr[i] = '3'; 
 
      break; 
 
      case "lab" : 
 
      arr[i] = "4"; 
 
      break; 
 
     } 
 
     } 
 
     this.form.get('roles').setValue(arr || []); 
 
    } 
 

FormBuilder和FormGroup从进口@角/形成

Answer 2

在这种情况下的使用形式的控制来捕捉最终用户响应于该选择。不是整个列表的存储。尝试使用@Input像这样的数组中传递..

<get-user-info 
    [roles]="someArray"> 
<get-user-info> 

现在不是使用ngOnInit，尝试在构造函数中定义它，而不是

/** 
* Implementation for GetUserInfoComponent: 
*/ 
export class GetUserInfoComponent { 
    /** 
    * GetUserInfoComponent constructor 
    * @param builder 
    */ 
    constructor(
     private builder    : FormBuilder 
    ) { 
     // init form input fields 
     this.roleSelected   = new FormControl('', undefined); 

     // build User Information FormControl group 
     this.userInfo = this.builder.group({ 
      roleSelected   : this.rolesSelector 
     }); 

     // subscribe to any form changes 
     this.roleSelected.valueChanges.filter(value => value != null).subscribe((value : string) => { 
      // emit updated email value event 
      this.updateRole(value.trim()); 
     }); 
} 

/** 
* available selectable roles 
*/ 
@Input() roles : Array[String]; 

/** 
* user's selected role state 
*/ 
roleSelected : string; 

/** 
* event handler for role selection event 
*/ 
updateRole() { 
    // do something 
}