Angular 4 ng-select Dynamic Valeurs par défaut

Question

J'ai un formulaire pour le composant ng-select, qui montre les rôles d'un utilisateur, dans mon projet Angular 4. Dans ce composant, je dois d'abord obtenir les rôles de l'utilisateur et les montrer comme valeurs par défaut. Pour être en mesure de le faire, j'utilise FormControls dans ngOnInit. Comme j'obtiens les valeurs par défaut d'un service, elles se chargent si lentement en fonction de l'initialisation de FormGroup. Je les appelle tous les deux dans ngOnInit mais chaque fois que le FormGroup s'exécute avant. Je ne vois donc aucune des valeurs par défaut à l'écran. J'ai essayé de le faire asynchrone mais je ne pouvais pas le faire.

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

C'est parce que vous appelle http sont par async par défaut et vous devez valeur définie lorsque l'appel est terminé à votre groupe de formulaire.

 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 et FormGroup sont importés de @ forme angulaire/

Answer 2

Dans ce cas que vous utilisez le contrôle de formulaire pour capturer les utilisateurs finaux réponse à la sélection. Pas le stockage de la liste dans son ensemble. Essayez d'utiliser @Input passer dans le tableau comme si ..

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

maintenant au lieu d'utiliser ngOnInit, essayez de définir dans le constructeur au lieu

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