角度：@Inputの変更を購読するには

Question

提供されているオブジェクト配列を使用してhtmlテーブルをレンダリングする角度コンポーネントを作成しようとしています。

@Inputの変更を検出するためにOnChangesを実装しましたが、動作していないようです。

テストの場合、私はsetIntervalを使用してデータを追加していますが、子コンポーネントには反映されません。

export class NgTableComponent implements OnInit, OnChanges { 

    @Input() data: any[]; 

    private columns: string[]; 
    private rows: string[][]; 

    constructor() { 
     this.columns = []; 
     this.rows = []; 
    } 

    ngOnInit() { 
    } 

    ngOnChanges(changes: SimpleChanges) { 
     console.log(changes); 
     if (changes.data) { 
      this.extractRowsAndColumns(this.data); 
     } 
    } 

    extractRowsAndColumns(objArray: any[]): void { 
     const colSet = new Set<string>(); 
     for (let i = 0; i < objArray.length; i++) { 
      const keys = Object.keys(objArray[i]); 
      for (let j = 0; j < keys.length; j++) { 
       colSet.add(keys[j]); 
      } 
     } 
     this.columns = Array.from(colSet); 

     for (let i = 0; i < objArray.length; i++) { 
      const obj = objArray[i]; 
      const row = []; 
      for (let j = 0; j < this.columns.length; j++) { 
       if (obj.hasOwnProperty(this.columns[j])) { 
        row.push(obj[this.columns[j]]); 
       } else { 
        row.push(null); 
       } 
      } 
      this.rows.push(row); 
     } 
    } 
} 

NG-table.component.html：

<div> 
    <table class="ngtable"> 
     <tr> 
      <th *ngFor="let col of columns"> 
       {{col}} 
      </th> 
     </tr> 
     <tr *ngFor="let row of rows"> 
      <td *ngFor="let cell of row">{{cell}}</td> 
     </tr> 
    </table> 
</div> 

これは私がこれまで持っているコード、

NG-table.component.tsをIT

私はapp.componentで上記のコンポーネントを使用しています

app.component.ts： app.component.html

export class AppComponent { 
    timer: any; 
    count = 0; 
    constructor() { 
    const o: any = { 
     'id': 1, 
     'name': 'Jeanette', 
     'last_name': 'Penddreth', 
     'email': 'jpenddreth0@census.gov', 
     'gender': 'Female', 
     'ip_address': '26.58.193.2' 
    }; 
    this.timer = setInterval(() => { 
     this.data.push(o); 
     console.log(this.data.length); 
     if (this.count++ === 5) { 
     clearInterval(this.timer); 
     } 
    }, 1000 * 1); 
    } 

    data = [{ 
    'id': 1, 
    'name': 'Jeanette', 
    'last_name': 'Penddreth', 
    'email': 'jpenddreth0@census.gov', 
    'gender': 'Female', 
    'ip_address': '26.58.193.2' 
    }, { 
    'id': 2, 
    'name': 'Giavani', 
    'last_name': 'Frediani', 
    'email': 'gfrediani1@senate.gov', 
    'gender': 'Male', 
    'ip_address': '229.179.4.212' 
    }, { 
    'id': 3, 
    'name': 'Noell', 
    'last_name': 'Bea', 
    'email': 'nbea2@imageshack.us', 
    'gender': 'Female', 
    'ip_address': '180.66.162.255' 
    }, { 
    'id': 4, 
    'name': 'Willard', 
    'last_name': 'Valek', 
    'email': 'wvalek3@vk.com', 
    'gender': 'Male', 
    'ip_address': '67.76.188.26' 
    }]; 
} 

：

<app-ng-table [data]="data"></app-ng-table> 

がどのようにコンポーネントのアップデート@Inputの変更を行うことができますか？

UPDATE：私はこれを実証plunkr作成した：あなたの問題の簡単な解決策としてhttps://plnkr.co/edit/szz1SNooQ1vIZhnFgiys?p=preview

Answer 1

TimHoviusが述べたように、角度は参照チェックを行うだけです。同じ配列にプッシュしているので、ng-table.componentは変更を検出していません（入力への参照は同じです）。あなたができることの1つは、配列の浅いコピーを作成することです。

addItem(): void { 
    this.data.push(this.data[this.data.length-1]); 
    // create shallow copy of array, since this is a new array (and new reference) ngOnChanges hook of the ng-table.component will fire 
    this.data = this.data.slice(0); 
} 

今NG-table.componentは、入力がここ

を変更し、火災ngOnChangesたことを検出し、これをデモplunkr（https://plnkr.co/edit/2tdMEA9PLc2TEL4Gy4Lp?p=preview）

Answer 2

を、あなたはこのようなngOnChangesで@Input変化を検出することができます

ngOnChanges(changes: SimpleChanges) { 
    for (let propName in changes) { 
     // when your @Input value is changed 
     if(propName === "yourInputName"){ 
     // update the component here 
     } 
    } 
} 

を、それがお役に立てば幸いです。 ）

Answer 3

@Input（）双方向バインディングを作成してください。

_data; 
@Input() set data(val) { 
    this._data = val; 
} 
get data() { 
    return this._data; 
} 

Answer 4

私は前と同じ問題がありました。 ngOnChangesメソッドは、データ型==!の配列の変更のみをリッスンします。

説明（ngOnChanges not firing for nested object）：

変化検出角度チェック部品入力変化に対する 特性の間、それは（本質的に）使用===ダーティチェック用。 配列の場合、配列参照（のみ）がダーティチェックされていることを意味します。 rawLapsData配列の参照が変更されていないため、ngOnChanges（） は呼び出されません。