问题通常出现在包含模态表单的组件上。在插入新数据后,父组件不重新加载,因此新数据不会显示。解决方法是在成功插入数据后重新加载父组件。 示例代码:
// 子组件(包含模态表单的组件)中的插入函数
insertData() {
this.dataService.insertData(this.newData).subscribe(() => {
this.activeModal.dismiss();
this.onInsert.emit();
});
}
// 父组件中的重新加载函数
reloadData() {
this.dataService.getData().subscribe(data => this.data = data);
}
// 父组件中的 onInsert 事件处理程序
onInsert() {
this.reloadData();
}
在子组件中,在成功插入数据后 emit onInsert 事件。在父组件中,监听 onInsert 事件并调用 reloadData 函数重新加载数据。这将触发父组件和子组件的变更检测,以便在页面上显示新数据。