angular - 数组 - 更改不会传播到子组件
问题描述
家长:
<div id="join-container">
<join-chain
id="my-join-chain"
[selectedColumn]="selectedColumn"
(updatedStatements)=onUpdatedStatements($event)>
</join-chain>
<tile-canvas
id="my-tile-canvas"
[mystatements]="theStatements"
(selectedColumn)="onSelectedColumn($event)">
</tile-canvas>
</div>
家长ts
代码:
onUpdatedStatements(statements: Relational.JoinStatement[]) {
this.theStatements = statements;
console.log(">> fired from step-joining")
console.log(this.theStatements)
}
孩子:
...
mappings: Mapping[] = []
@Input() set mystatements(someStatements: Relational.JoinStatement[] | undefined) {
console.log(">> tile canvas interceptor")
console.log(someStatements)
if (someStatements !== undefined) {
let idsFromStatements = someStatements
.map(statement => [statement.leftTile, statement.rightTile])
.filter(mapping => (mapping[0] !== undefined) && (mapping[1] !== undefined)) as ([Relational.tileId, Relational.tileId])[]
this.mappings = idsFromStatements.map(ids => new Mapping(ids))
}
}
我在玩该应用程序时看到该消息fired from step-joining
多次出现。另一方面,>> tile canvas interceptor
只发生一次,在第一次之后fired from step-joining
。
我通读了几篇文章,并有一个类似的模式有效,即每次都会触发“拦截器”。
解决方案
在
onUpdatedStatements(statements: Relational.JoinStatement[]) {
this.theStatements = statements;
console.log(">> fired from step-joining")
console.log(this.theStatements)
}
如果语句具有与 this 相同的引用和值,则不会在子组件中触发 onChange 的语句
推荐阅读
- http - 需要很长时间才能回复的 SOAP 请求 - 停止连接断开的任何想法
- python - 将 NamedTuple 转换为 dict 以用于字典解包 (**kwargs) 的 Pythonic 方式
- javascript - 如何在数组项的第二个对象中查找第一个数组项并从第二个对象返回匹配项
- machine-learning - 高效的 ROC/AUC 计算和时间复杂度
- google-apps-script - 如何避免在高级驱动器服务更改列表中重复显示相同的文件
- gremlin - 在 Gremlin 查询中将项目结果转换为单个列表
- python - 熊猫爆炸与非列表列
- node.js - Node.js API 由 Keycloak 保护,访问类型为“仅承载”
- python-3.x - Zeep 客户端服务请求缺少元素
- html - 我切换到 Visual Studio 代码,我面临这个问题