Angular6：自定义组件上的输入绑定没有正确更新答案

【问题标题】：Angular6: Input binding on custom component doesn't update correctlyAngular6：自定义组件上的输入绑定没有正确更新
【发布时间】：2019-01-17 19:29:43
【问题描述】：

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 请求，再次使用 2 对而不是没有。第二次按下搜索按钮时，发送正确的请求。

我进行了调试，内部一切正常，只是数据绑定没有及时更新。对此有什么想法吗？

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

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

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

【问题讨论】：

你们组件的变化检测策略是什么？你检查过了吗：netbasal.com/…？
如何更新sodMatrixQuery？
@AgashThamo。我还没有真正设置一个特定的策略，所以我猜这是默认的？我只是觉得它适用于一个标签而不适用于另一个标签很奇怪
@rinukkusu 现在用更多代码更新我的帖子！
如果你不扩展任何东西，应该是默认的。如果@Inputs 之一是对象或数组，则如果您更改对象或数组中的值，Angular 将不会检测到更改，因为它会比较引用，这将保持不变。编辑：您是否可以创建一个基本的堆栈闪电战并重新创建您的问题？

标签： angular typescript data-binding angular6

【解决方案1】：

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

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

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

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

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

【讨论】：