等到我的FormlyFieldConfig加载完毕

Question

我遇到了一个问题，我试图在完全加载之前使用UI元素，导致未定义的异常。

表单在组件构造函数中加载，然后我调用initializeElements方法来处理UI元素。 但是，正如我所提到的，我得到了null和未定义的异常，因为我怀疑当我去获取对象时loa​​dForms（）方法没有完全完成。

我是棱角分明的新手，所以我不知道我能做什么来“等待”，直到表格完全装满。 我已经尝试将这些方法放在几个不同的生命周期钩子中，但没有取得任何成功。

我有我的组件：

export class UIComponent implements OnInit{
    form = new FormGroup({});
    model = {};
    fields: FormlyFieldConfig[];

    constructor(){
        this.fields = loadForm();

        this.initializeElements();
    };

    ngOnInit(){
    }; 


    initializeElements(){
        var overrides = this.form.get('Overrides'); // this is null on page load
        var firstNameObj = overrides.get('First Name'); // also null on page load
    };
}

我的组件模板：

<form fxLayoutAlign="center center" [formGroup]="form">
    <formly-form [form]= "form" [fields]="fields" [model]="model"></formly-form>
</form>

方法loadForms：

export function loadForms(){
    return [
               {
                   'key': 'Overrides',
                   'fieldGroup': [{
                   'fieldGroupClassName': 'display-flex',
                   'fieldGroup': [{
                                     'key': 'First Name',
                                     'type': 'input',
                                     'value': 'New First Name',
                                     'templateOptions':{
                                          'label': 'First Name: '
                                      }
                                 },
                                     'key': 'Last Name',
                                     'type': 'input',
                                     'value': 'New Last Name',
                                     'templateOptions':{
                                          'label': 'Last Name: '
                                     }
                                 }]
                    }]
               }
          ]
}

Answer 1

看看生命周期： https ： //angular.io/guide/lifecycle-hooks

如果在constructor()方法中使用loadForms() ，它将不会等待视图加载。 为此，如果要确保视图已完成加载，请使用ngAfterViewInit() 。

如果可能，请不要在构造函数上加载数据或调用方法，根据需要使用ngOnInit ， ngAfterViewInit()或上面文档中列出的任何生命周期钩子。

我不知道你是否使用它们，以防你尝试使用ngAfterViewInit()并且它不起作用尝试在<form>标签上设置*ngIf=fields

希望能帮助到你。

Answer 2

你可以创建一个可观察的

export class UIComponent implements OnInit{
    form = new FormGroup({});
    model = {};
    overrides: any;
    firstNameObj: string = '';
    fields: FormlyFieldConfig[];

    constructor(){
    };

    ngOnInit(){
        loadForm().subscribe(
        response => {
           this.fields = response;
           this.initializeElements();
        }
    }; 


    initializeElements(){
        overrides = this.form.get('Overrides'); // this is null on page load
        firstNameObj = overrides.get('First Name'); // also null on page load
    };
}

然后你的导出功能看起来与此类似。 我认为这是在它自己的文件中，因此可能会有一点差异。 但是如果要将此函数从函数更改为http服务调用，则observable应该保持不变。

export function loadForms (): Observable<any> => {
  return new Observable<any>(observer =>{
    observer.next([
      {
        'key': 'Overrides',
        'fieldGroup': [{
          'fieldGroupClassName': 'display-flex',
          'fieldGroup': [{
            'key': 'First Name',
            'type': 'input',
            'value': 'New First Name',
            'templateOptions':{
            'label': 'First Name: '
            }
          },
          {
            'key': 'Last Name',
            'type': 'input',
            'value': 'New Last Name',
            'templateOptions':{
              'label': 'Last Name: '
            }
          }]
        }]
      }
  ]);
}