角度4 ng-select動的デフォルト値

Question

Angular 4プロジェクトで、ユーザーの役割を示すng-selectコンポーネントのフォームがあります。そのコンポーネントでは、まずユーザーの役割を取得し、それらをデフォルト値として表示する必要があります。それを可能にするために、私は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

を形成しています。リスト全体の格納ではありません。未定義で、取得、それは言う

/** 
* 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 
}