我遇到了一个问题,我试图在 UI 元素完全加载之前使用它们,导致未定义的异常。
表单在组件构造函数中加载,然后我调用 initializeElements 方法来处理 UI 元素。然而,正如我所提到的,我得到了 null 和未定义的异常,因为我怀疑当我去获取对象时 loadForms() 方法没有完全完成。
我是 Angular 的新手,所以我不确定我可以在这里做什么来“等待”直到表单完全加载。我已经尝试将这些方法放在几个不同的生命周期 Hook 中,但没有取得任何成功。
我有我的组件:
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>
方法加载表单:
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: '
}
}]
}]
}
]
}
最佳答案
查看生命周期:https://angular.io/guide/lifecycle-hooks
如果您使用 loadForms()
在你的constructor()
方法,它不会等待 View 加载。为此,如果你想确保你的 View 完成加载,请使用 ngAfterViewInit()
.
如果可能的话,请不要在构造函数上加载数据或调用方法,使用 ngOnInit
, ngAfterViewInit()
或根据需要在上面的文档中列出的任何生命周期 Hook 。
我不知道你是否使用过它们,以防你尝试使用 ngAfterViewInit()
尝试设置 *ngIf=fields
并没有用在你的 <form>
标签
希望对您有所帮助。
关于javascript - 等到我的 FormlyFieldConfig 完成加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51713829/