Angular：如何订阅@Input变化

Question

我想创建一个角度组件，它使用提供的对象数组呈现一个html表。

我已经实施OnChanges来检测@Input的变化，但它似乎并没有工作。

对于测试，我使用setInterval来添加一些数据，但它没有反映在子组件中。

这一点，我的代码到目前为止，

NG-table.component.ts：

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> 

我在app.component中使用了上述组件

个

app.component.ts：

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.component.html：

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

我怎样才能使组件更新时@Input变化？

更新：我创建了一个plunkr证明这一点：https://plnkr.co/edit/szz1SNooQ1vIZhnFgiys?p=preview

Answer 1

正如TimHovius所说，角度只做参考检查。由于您正在推送相同的数组，因此ng-table.component未检测到更改（对输入的引用仍然相同）。你可以做的一件事是创建数组的浅表副本。

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 demoing这个（https://plnkr.co/edit/2tdMEA9PLc2TEL4Gy4Lp?p=preview）

Answer 2

为一个简单的解决你的问题，你可以检测@Input变化ngOnChanges这样的：

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（） 。