通过输入和输出属性 实现数据在父子组件的交互
在子组件内部使用@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. java进程占用系统内存高,排查解决

    转自:http://blog.51cto.com/chengxiaobai/2052530?cid=695076 故障:最近收到生产服务器的报警短信以及邮件,报警内容为:内存使用率高于70%. 使用t ...

  2. 3.3 idea中使用git遇到的一些问题

    1. 修改TortoiseGit用户名和密码 修改TortoiseGit用户名和密码其实就是对Git的用户名和密码就行修改. 控制面板 -> 点击“用户账户” -> 管理windows凭据 ...

  3. spring controller方法和jstl

    1复杂类型查询:查询条件已经多于一个实体类中的属性 1)可以创建一个类用于组合查询条件 基础类 public class Items { private Integer id; private Str ...

  4. 《剑指offer》第六十三题(股票的最大利润)

    // 面试题63:股票的最大利润 // 题目:假设把某股票的价格按照时间先后顺序存储在数组中,请问买卖交易该股 // 票可能获得的利润是多少?例如一只股票在某些时间节点的价格为{9, 11, 8, 5 ...

  5. ArcFace2 #C 视频人脸比对教程

    请允许我大言不惭,叫做教程,特希望各位能指正.哦,我用的是vs2017.使用虹软技术 一.准备工作1.创建项目 2.添加EMGU.CV包 3.复制虹软的dll到项目 ,并设属性“复制到输出目录”为“如 ...

  6. keil MDK注意事项

    1.MDK中的char类型的取值范围是? 在MDK中,默认情况下,char 类型的数据项是无符号的,所以它的取值范围是0-255.它们可以显式地声明为signed char 或 unsigned.因此 ...

  7. springboot ----> sts如何启动两个实例

    idea 实现启动两个spring boot工程实例的方法 可以参考这篇博客. 因为使用spring tool suite 学习spring cloud 需要实例化两个spring boot 工程来构 ...

  8. python Deep learning 学习笔记

    https://www.cnblogs.com/zhhfan/p/10300012.html

  9. English trip V1 - B 4.How Do You Make a Salad? 请给我一间房? Teacher:Julia Key:imperatives 祈使句

    In this lesson you will learn to give instructions. 这节课你将将学会给出指示. 课上内容(Lesson) 词汇(Key Word ) bell pe ...

  10. c++-pimer-plus-6th-chapter06

    Chapter Review 1 Both version give the same answers, but the if else version is more efficient. Cons ...