Angular 中的数据未从父组件传递到子组件

Question

我有几个复选框，我正在将这些复选框值推入一个数组。然后我尝试使用 @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)

Answer 1

数组通过引用传递给children。

您只是将新项目推送到您的 layers 数组，因此引用保持不变。因此，Angular 的变更检测周期不会被触发，OnChanges 生命周期挂钩不会检测到 @Input[=21 上的任何变更=].

每次更改数组时都需要创建一个新实例。或者只是在这些组件之间使用共享服务。这样 parent 会将项目推送到数组，而 child 将监听这些更改（使用 Observables）。

Answer 2

改为这样做

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);
  }

Angular 中的数据未从父组件传递到子组件

Data not passing to child component from parent component in Angular

parent-child

angular-components

angular