angular - Angular 9如何刷新子组件中的@Input数据
问题描述
我有一个子组件,它在 mat-table 中显示一个结果,该结果来自父组件作为@Input。
我在子级中使用对话框组件来编辑 mat-table 中的行。然后在数据库中更新行值。
但问题是我的@Input 数据没有更新,所以我尝试创建新的数据源 onChangedetector 但表没有更新。刷新页面后,表格会更新,因为我将新数据作为@Input 获取。
所以我的问题是无论如何更新子组件中的@Input数据(即刷新父组件,以便它在从数据库更新后发送新的输入数据)
我可以认为一种方法是通过调用子组件中父组件使用的服务来更新@input数据...
有没有更好的解决方案?
解决方案
前段时间,我使用@Input 和@Output 编写了这段代码。通过这些装饰器,您可以在父组件和子组件之间传递值。在此示例中,如果来自父组件的输入发生一些变化,则再次执行设置月份功能。
为了注意到子进程发生了变化,您可以使用 @Output 中的 emit 函数。
希望对您的问题有所帮助。或者至少给你一些关于如何改进它的想法。
@Input()
set month(data:any) {
// data = {year: 2020, month: 4}
this.GenerateDays(data.year, data.month); // 2019/Agosto (2019, 7) Ene=0
}
@Output() onDayChange = new EventEmitter();
/////////////////////////////////////////////////////////////////////////////
private GenerateDays (year:number, month:number) {
// Logic to Generate Days
}
public SelectDay (id:number) {
this.selectedDay = id;
this.onDayChange.emit(this.selectedDay);
}
推荐阅读
- javascript - VueJS路由器espace“&”字符然后使查询参数失败
- javascript - 通过 keyup 事件搜索单个 Datatable 列有效,但 draw() 函数无效
- amazon-web-services - Amazon Simple Email Service (Amazon SES) 将邮件发送到垃圾邮件中
- hyperledger-fabric - 如何在 Hyperledger Fabric 上调试 nodejs 链代码
- r - 在哪里并行化?构建一个 bash 脚本以在多个节点上进行并行化
- kubernetes - 加载 kubelet 配置文件失败
- python - 从 Python 通过 whatsapp 发送文件
- android - MPAndroidChart 相对于绘制的值显示较少数量的 x 轴
- excel - 在excel vba中转换工作周中的日期
- visual-studio-code - 如何在 Visual Studio Code 中设置 Maven 配置文件?