Angular 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

在这种情况下，您正在使用表单控件来捕获最终用户对选择的响应。不是整个列表的存储。尝试使用@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
}

Answer 2

这是因为默认情况下您的 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 是从 @angular/forms 导入的