我有一个看起来像这样的子组件
子组件
@Component({
selector: 'child-component',
//TemplateUrl, Styles and Providers
})
export Class ChildComponent implements OnInit{
@Input()
arrayToGet; //An array that I want to pass from Parent to child
ngOnInit(){
console.log('The Array I got is ', this.arrayToGet); //Undefined, Tried even with setTimeout
}
//A bunch of methods to work with the array I get
}
父组件
@Component({
selector: 'parent-component',
template: '<div>
<child-component [arrayToGet]="models"></child-component>
</div>',
//A bunch of Styles and Providers
})
export class ParentComponent{
models;
constructor(......){}
ngOnInit(){
//Get an array from a service assign to this.models;
}
}
问题是我无法执行任何操作arrayToGet
在我的里面ChildComponent
。但是我可以使用这些属性arrayToGet
在我的里面ChildComponent
的 HTML。
有什么想法吗?
每当尝试从以下位置传递数据时parent
to child
using @Input
装饰器和传递数据当时不可用child
初始化,更好用setter
,而不是直接绑定到变量中child
成分。使用setter
每当父组件中的数据更新时,都会更新子组件变量。
export Class ChildComponent implements OnInit{
arrayToGet; //An array that I want to pass from Parent to child
ngOnInit(){
console.log('The Array I got is ', this.arrayToGet); //Undefined, Tried even with setTimeout
}
@Input('arrayToGet')
set _arrayToGet(data: Array) {
this.arrayToGet = data;
console.log(this.arrayToGet);
}
//A bunch of methods to work with the array I get
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)