Angular6：自定义组件上的输入绑定无法正确更新

Question

关于StackOverflow的第一个问题，多么令人兴奋！

目前我有两个自定义组件，都接受几个输入变量：

<sod-matrix-table #matrix 
  [entities]="entities" 
  [pairs]="pairs" 
  [displayedColumns]="displayedColumns">
</sod-matrix-table>

并且：

<data-table 
  #table 
  [type]="sodMatrixQuery.targetType" 
  [query]="sodMatrixQuery" >
</data-table>

更新第一个标记的entities ， pairs或columns时，所有内容都会正确更新。 例如，当我更新使用矩阵表标记的组件中的displayedColumns数组时，该组件内的表将使用所需的列进行更新。
但是，当我更新组件中的sodMatrixQuery并按下搜索按钮时， data-table的query对象不会正确更新，尽管它们绑定在一起。

例：

data-table具有字段query并使用此查询将REST请求发送到服务器。 SODMatrixComponent有一个字段sodMatrixQuery并使用data-table的标记，将其字段绑定到另一个字段。

SOD矩阵包含对象对。 当我选择2对时，按下搜索按钮， data-table发送2对REST请求。 但是，当我删除这两对，并再次按下搜索时， data-table组件再次发送另一个REST请求，而不是两对。 再次按下搜索按钮时，会发送正确的请求。

我调试了内部所有对都很好，它只是数据绑定不及时更新。 有什么想法吗？

编辑：这是按钮单击时发生的代码：

public search() {
    const tempQuery = new SODMatrixQuery(this.lhsType, this.rhsType, [], this.entities);

    // Only look at elements above the diagonal
    for (let i = 1; i < this.pairs.length; i++) {
        for (let j = 0; j < i; j++ ) {
            const p = this.pairs[i][j];
            if (p.checked) {
                tempQuery.addToxicPair(p);
            }
        }
    }

    if (this.dataTable) {
        this.sodMatrixQuery = tempQuery;
        // this.dataTable.query = tempQuery;
        this.dataTable.loadDataPage();
    }

}

SODMatrixComponent变量：

@ViewChild("table")
public dataTable: ElimityDataTableComponent;

public sodMatrixQuery: SODMatrixQuery;

数据表组件：

@Input()
public query: Query;

SODMatrixQuery扩展了Query！

下面的注释行是一个修复，直接更新查询对象，但我只是好奇为什么数据绑定不起作用。

Answer 1

看起来变化检测需要片刻来呼吸 - 在sodMatrixQuery成员的设置和this.dataTable.loadDataPage()调用之间无法更新数据绑定 - 这就是为什么它在第一次调用时仍然具有旧值。 之后，将运行更改检测，在第二次调用时，它将具有正确的值。

if (this.dataTable) {
    this.sodMatrixQuery = tempQuery;
    // can't update the bindings here
    this.dataTable.loadDataPage();
}

因此，查看当前的体系结构，最好将对dataTable组件的loadDataPage()调用移动到OnChanges生命周期钩子中，就像Agash在评论中所说的那样。

export class ElimityDataTableComponent implements OnChanges {
  // ...
  ngOnChanges(changes: SimpleChanges) {
    if (changes.query) {
      this.loadDataPage();
    }
  }

这样，每次更新sodMatrixQuery ，它都会自动加载新数据。