[英]Data not passing to child component from parent component in Angular
我有几个复选框,我将这些复选框值推送到一个数组中。 然后我尝试使用 @Input 装饰器从子组件访问这些数据。 但是数据甚至没有传递给子组件(不显示console.log)。 你能帮我解决这个问题吗?
父组件 (.ts)
public layers: any[] = [];
layerChange(e:any){
var isChecked = e.target.checked;
var id = e.target.attributes.id.nodeValue;
const index = this.layers.findIndex(el => el.id === id);
const layer = {
isChecked: isChecked,
id: id,
}
if(index > -1){
this.layers[index].isChecked = isChecked;
}else{
this.layers.push(layer);
}
console.log(this.layers);
}
.html
<input id="population" (change)="layerChange($event)" type="checkbox">
<input id="age" (change)="layerChange($event)" type="checkbox">
<app-esri-map [layerChange] = "layers"></app-esri-map>
子组件 (.ts)
@Input() layerChange: Array<any>;
console.log(layerChange)
Arrays 通过引用传递给子级。
您只是将新项目推送到您的图层数组,因此参考保持不变。 因此,Angular 的更改检测周期不会被触发,并且OnChanges生命周期挂钩不会检测到该@Input上的任何更改。
每次更改阵列时都需要创建一个新实例。 或者只是在这些组件之间使用共享服务。 这样,父母将把项目推送到数组中,孩子将监听这些变化(使用 Observables)。
改为这样做
public layers: any[] = [];
layerChange(e:any){
var isChecked = e.target.checked;
var id = e.target.attributes.id.nodeValue;
const index = this.layers.findIndex(el => el.id === id);
const layer = {
isChecked: isChecked,
id: id,
}
if(index > -1){
this.layers[index].isChecked = isChecked;
}else{
this.layers.push(layer);
}
this.layers = [...this.layers];
console.log(this.layers);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.