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并按搜索按钮时，query的{{1}}对象虽然被绑定在一起，却没有正确更新。

示例：

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

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

我进行了调试，并且内部所有对都运行良好，只是数据绑定没有及时更新。有什么想法吗？

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

data-table

SODMatrixComponent变量：

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();
    }

}

数据表组件：

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

public sodMatrixQuery: SODMatrixQuery;

SODMatrixQuery扩展了查询！

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

Answer 1

看起来变化检测将需要一些时间来呼吸-无法在empty constructor成员的设置和sodMatrixQuery调用之间更新数据绑定-这就是为什么它仍然具有旧值的原因在第一个电话上。之后，将运行更改检测，并在第二次调用时，它将具有正确的值。

this.dataTable.loadDataPage()

因此，从您当前的架构来看，最好将对dataTable组件的if (this.dataTable) { this.sodMatrixQuery = tempQuery; // can't update the bindings here this.dataTable.loadDataPage(); }调用移到loadDataPage()生命周期挂钩中，就像Agash在评论中所说的那样。

OnChanges

这样，每次更新export class ElimityDataTableComponent implements OnChanges { // ... ngOnChanges(changes: SimpleChanges) { if (changes.query) { this.loadDataPage(); } }时，它都会自动加载新数据。

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

1 个答案: