數據未從 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

Arrays 通過引用傳遞給子級。

您只是將新項目推送到您的圖層數組，因此參考保持不變。 因此，Angular 的更改檢測周期不會被觸發，並且OnChanges生命周期掛鈎不會檢測到該@Input上的任何更改。

每次更改陣列時都需要創建一個新實例。 或者只是在這些組件之間使用共享服務。 這樣，父母將把項目推送到數組中，孩子將監聽這些變化（使用 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);
  }