angular4,angular6 父组件异步获取数据传值子组件 undefined 问题
通过输入和输出属性 实现数据在父子组件的交互
在子组件内部使用@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 问题的更多相关文章
- Vue 父组件ajax异步更新数据,子组件props获取不到
转载 https://blog.csdn.net/d295968572/article/details/80810349 当父组件 axjos 获取数据,子组件使用 props 接收数据时,执行 mo ...
- vue父组件异步传递prop到子组件echarts画图问题踩坑总结
效果图: 大致思路:考虑到5张图都是折线图,所以准备用一个子组件承接echarts画图,然后父组件通过prop传递不同数据来展示不同的图 踩坑问题: 1.引入line子组件,画了5个元素,但是只显示一 ...
- react+dva 全局model中异步获取数据state在组件中取不到值
先上结论,不是取不到,是写法有问题. 全文分4部分,1是问题描述,2是一开始的解决想法(错误做法),3是问题产生原因的思考,4是正常解决方法.只想看结论直接跳4 1.问题描述 接触react dva一 ...
- vue父组件异步获取动态数据传递给子组件获取不到值
原理: 在父组件中使用axios获取异步数据传给子组件,但是发现子组件在渲染的时候并没有数据,在created里面打印也是空的,结果发现一开始子组件绑定的数据是空的,在请求数据没有返回数据时,子组件就 ...
- 详解vue父组件传递props异步数据到子组件的问题
案例一 父组件parent.vue // asyncData为异步获取的数据,想传递给子组件使用 <template> <div> 父组件 <child :child-d ...
- [转]详解vue父组件传递props异步数据到子组件的问题
原文地址:https://www.cnblogs.com/goloving/p/9114389.html 案例一 父组件parent.vue // asyncData为异步获取的数据,想传递给子组件使 ...
- Vue Router路由守卫妙用:异步获取数据成功后再进行路由跳转并传递数据,失败则不进行跳转
问题引入 试想这样一个业务场景: 在用户输入数据,点击提交按钮后,这时发起了ajax请求,如果请求成功, 则跳转到详情页面并展示详情数据,失败则不跳转到详情页面,只是在当前页面给出错误消息. 难点所在 ...
- 用redux-thunk异步获取数据
概述 最近学习redux,打算用redux-thunk给todo添加异步获取数据组件.记录下来,供以后开发时参考,相信对其他人也有用. 注意: 在todo下方,我异步获取我的react博客的标题,点击 ...
- vue 高级属性父组件provide向子组件发送数据,子组件通过inject接收数据
以前父组件向子组件中传值是通过props传值,子组件不能更改父组件中的值,但是可以通过从父组件中获取的值定义给自己的data值,这里父组件可以通过provide向子组件传递自己组件中的data值,子组 ...
随机推荐
- eureka 和zookeeper 区别 优势【转】
作为服务注册中心,Eureka比Zookeeper好在哪里 著名的CAP理论指出,一个分布式系统不可能同时满足C(一致性).A(可用性)和P(分区容错性).由于分区容错性在是分布式系统中必须要保证的, ...
- Java Object类及其equals方法
基本概念: Object类位于java.lang包中,java.lang包包含着Java最基础和核心的类,在编译时会自动导入: Object类是所有Java类的祖先.每个类都使用 Object 作为超 ...
- Python 列表list 字典dict
# coding=utf-8 支持中文 # 列表 n1 = [1, 2, 3] print n1 print len(n1) n1.append(4) print n1 # 字典,包含键值 dic = ...
- 学习笔记21—PS换图片背景
将照片红底的换成白底的. 操作步骤: 1 先上效果,照片来自网络反正不认识,法律问题找度娘 2 下面开始操作,打开图片进入通道面板,选择照片底色的那个通道,复制并调整色阶,确保黑白分明 3 回到图层面 ...
- mint fcitx搜狗输入法不显示输入框,其他输入法丢失皮肤
mint18.3 因为这个原因刚刚重装过,结果一不留神又这样了. 这次原因相对清晰: 双屏显示下,合屏睡眠,打开之后,发现卡死了.屏幕分辨率改变了似的. 然后再重启,发现输入法悬浮框变大了,然后输入法 ...
- 有关C#中List排序的总结
这里有一篇文章作者总结的就比较详细: https://blog.csdn.net/jimo_lonely/article/details/51711821 在这里只记录一点: 对list或者数组中的数 ...
- (转)基于C#的socket编程的TCP异步实现
一.摘要 本篇博文阐述基于TCP通信协议的异步实现. 二.实验平台 Visual Studio 2010 三.异步通信实现原理及常用方法 3.1 建立连接 在同步模式中,在服务器上使用Accept方法 ...
- (转)c# 属性与索引器
属性是一种成员,它提供灵活的机制来读取.写入或计算私有字段的值. 属性可用作公共数据成员,但它们实际上是称为“访问器”的特殊方法. 这使得可以轻松访问数据,还有助于提高方法的安全性和灵活性. 一个简单 ...
- 《HTTP 权威指南》笔记:第十二章 基本认证体制
导言 客户端可以通过网络来得到想要的信息,但是有一些信息并不能是对所有人都能看到的,因此必须有一种认证机制.服务器需要通过这种方式来了解用户身份,一旦服务器知道了用户的身份,就可以让用户能够访问请求的 ...
- android--------实现Activity和Fragment通信的面向对象的万能接口
前言 开发一个app时,常用Activity和Fragment,由于操作方便Fragment越来越受欢迎,这样就避免不了Activity和Fragment.Fragment和Fragment之间的通信 ...