通过输入和输出属性 实现数据在父子组件的交互
在子组件内部使用@input接受父组件传入数据,使用@output传出数据到父组件
详细标准讲解参考官方文档
https://angular.cn/guide/component-interaction#pass-data-from-parent-to-child-with-input-binding

但是我在开发中遇到这样一个问题,当父组件传入的数据是在网络请求回来之后才被赋值,这时的子组件已经初始化结束,就会存在异步的问题
解决办法是使用ngOnChanges()来截听输入属性值的变化,然后在自己的代码里处理数据;

代码如下:
父组件使用子组件代码 parent传入child传出

父: html

<child-app [parent]="parent" (child)="getChild($event)"></child-app>

父:ts

getChild(child) {
    //子组件返回数据
    console.log(child)
}

子:ts

@Component({
    selector: 'child-appt',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})

@Input() parent: any;
@Output() child = new EventEmitter<any>()

ngOnChanges(changes: SimpleChanges): void {
    if (changes['parent'] !== undefined) {
        this.curParent = changes['parent'].currentValue;
    }
}

this.child.emit(data);

angular4,angular6 父组件异步获取数据传值子组件 undefined 问题的更多相关文章

  1. Vue 父组件ajax异步更新数据,子组件props获取不到

    转载 https://blog.csdn.net/d295968572/article/details/80810349 当父组件 axjos 获取数据,子组件使用 props 接收数据时,执行 mo ...

  2. vue父组件异步传递prop到子组件echarts画图问题踩坑总结

    效果图: 大致思路:考虑到5张图都是折线图,所以准备用一个子组件承接echarts画图,然后父组件通过prop传递不同数据来展示不同的图 踩坑问题: 1.引入line子组件,画了5个元素,但是只显示一 ...

  3. react+dva 全局model中异步获取数据state在组件中取不到值

    先上结论,不是取不到,是写法有问题. 全文分4部分,1是问题描述,2是一开始的解决想法(错误做法),3是问题产生原因的思考,4是正常解决方法.只想看结论直接跳4 1.问题描述 接触react dva一 ...

  4. vue父组件异步获取动态数据传递给子组件获取不到值

    原理: 在父组件中使用axios获取异步数据传给子组件,但是发现子组件在渲染的时候并没有数据,在created里面打印也是空的,结果发现一开始子组件绑定的数据是空的,在请求数据没有返回数据时,子组件就 ...

  5. 详解vue父组件传递props异步数据到子组件的问题

    案例一 父组件parent.vue // asyncData为异步获取的数据,想传递给子组件使用 <template> <div> 父组件 <child :child-d ...

  6. [转]详解vue父组件传递props异步数据到子组件的问题

    原文地址:https://www.cnblogs.com/goloving/p/9114389.html 案例一 父组件parent.vue // asyncData为异步获取的数据,想传递给子组件使 ...

  7. Vue Router路由守卫妙用:异步获取数据成功后再进行路由跳转并传递数据,失败则不进行跳转

    问题引入 试想这样一个业务场景: 在用户输入数据,点击提交按钮后,这时发起了ajax请求,如果请求成功, 则跳转到详情页面并展示详情数据,失败则不跳转到详情页面,只是在当前页面给出错误消息. 难点所在 ...

  8. 用redux-thunk异步获取数据

    概述 最近学习redux,打算用redux-thunk给todo添加异步获取数据组件.记录下来,供以后开发时参考,相信对其他人也有用. 注意: 在todo下方,我异步获取我的react博客的标题,点击 ...

  9. vue 高级属性父组件provide向子组件发送数据,子组件通过inject接收数据

    以前父组件向子组件中传值是通过props传值,子组件不能更改父组件中的值,但是可以通过从父组件中获取的值定义给自己的data值,这里父组件可以通过provide向子组件传递自己组件中的data值,子组 ...

随机推荐

  1. bzoj 1036: [ZJOI2008]树的统计Count 树链剖分+线段树

    1036: [ZJOI2008]树的统计Count Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 16294  Solved: 6645[Submit ...

  2. 软件测试中Bug的生命周期以及Bug的严重等级

    软件测试中Bug的生命周期以及Bug的严重等级 我猜你们都会,但能说专业且全面不? 1.首先当测试人员接到一个项目或产品准备测试的时候,测试人员会根据测试用例一步步的来执行用例进行简单的功能测试.当测 ...

  3. git分支错误提交导致代码丢失--窗口提示HEAD detached错误

    今天开发时git 检出分支到本地时操作错误,导致在一个临时分支上开发,且把代码提交了,结果代码未提交到任何分支,提交时还报了个错: HEAD detached at 4d927fa4 后来把代码重新检 ...

  4. python paramiko 模块简单介绍

    背景,公司的很多服务包括数据库访问都需要通过跳板机访问,为日常工作及使用带来了麻烦,特别数python直接操作数据更是麻烦了,所以一直想实现python 通过跳板机访问数据库的操作. 首先了解到了 p ...

  5. Linux下计划任务以及crontab权限问题

    在Linux工作环境下,我们有时可能会需要在未来某个时间执行某个命令或脚本,但是我们又不可能定个闹钟,然后到点了再去执行吧,这多麻烦.还好我们的Linux系统这么强大,提供了任务计划这个功能,我们就不 ...

  6. Java从内存流中读取byte数组

    Java中通过servlet接收二进制数据,然后将二进制数据流读取为byte数组.开始使用:byte[] bs = new byte[request.getContentLength()];reque ...

  7. Feign二: @FeignClient 接口调用

    在项目的启动文件加入:@EnableFeignClients 注解, import org.springframework.boot.SpringApplication; import org.spr ...

  8. MyEclipse下自定义(支持html5的)JSP模板--JSP

    需求:由于某些Mclipse版本发行的比较早,所以在有些版本(比如Mclipse2014,至于其他版本博主不知能不能创建html5格式的JSP页面)里创建JSP页面时html部分不是html5格式的. ...

  9. LeetCode--026--删除排序数组中的重复项

    问题描述: 给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素只出现一次,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外空间的条件下完成 ...

  10. 20170706xlVBA批量提取word表格中的自我评分

    单位里普遍存在各种低效率的办公行为,比如每年的自我评分.评分细目表为word文档,每行一个项目,每个项目要填写得分事项和分值,组长审核之后转成Excel向上递交.主要涉及到问题就是word文档中一列得 ...