Eckig 4 ​​ng-wählen Dynamische Standardwerte

Question

Ich habe ein Formular für ng-select-Komponente, die die Rollen eines Benutzers in meinem Angular 4-Projekt zeigt. In dieser Komponente muss ich zuerst die Benutzerrollen abrufen und sie als Standardwerte anzeigen. Um das zu tun, verwende ich FormControls in ngOnInit. Da die Standardwerte von einem Service abgerufen werden, werden sie entsprechend der Initialisierung der FormGroup so langsam geladen. Ich rufe beide in ngOnInit auf, aber jedes Mal, wenn die FormGroup läuft. Daher kann ich keine der Standardwerte auf dem Bildschirm sehen. Ich habe versucht, es asynchron zu machen, aber ich konnte es nicht tun.

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

Das ist, weil Sie http Anrufe standardmäßig async sind, und Sie haben einen Wert zu setzen, wenn der Anruf an Ihre Form Gruppe beendet ist.

 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 und FormGroup von @ Winkel importiert werden/bildet

Answer 2

In diesem Fall Ihre Formularsteuerung werden mit der Endanwender in die Auswahl Antwort auf einzufangen. Nicht die Speicherung der Liste als Ganzes. mit @Input Versuchen Sie, wie so im Array zu übergeben ..

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

Anstatt nun ngOnInit verwenden, versuchen Sie es im Konstruktor definieren, statt

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