Angular6:自定义组件上的输入绑定(bind)未正确更新

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 对象没有更新正确，尽管它们绑定(bind)在一起。

例子:

data-table 有一个字段 query 并使用此查询向服务器发送 REST 请求。 SODMatrixComponent 有一个字段 sodMatrixQuery 并使用 data-table 的标签，将他的字段绑定(bind)到另一个字段。

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

我进行了调试，在内部，所有与配对的东西都很好，只是数据绑定(bind)没有及时更新。对此有什么想法吗？

编辑:这是点击按钮时发生的代码:

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 扩展查询!

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

Answer 1

看起来变化检测需要一点时间来喘息——数据绑定(bind)不能在 sodMatrixQuery 的设置之间更新。成员(member)和this.dataTable.loadDataPage() call - 这就是为什么它在第一次调用时仍然具有旧值的原因。之后将运行更改检测，并且在第二次调用时它将具有正确的值。

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

所以看看你现在的架构，最好把loadDataPage()移走在 OnChanges 中调用 dataTable 组件生命周期钩子(Hook)，就像 Agash 在评论中所说的那样。

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

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