我设置了两个组件，父组件pvp和子组件battle-arrowhead。我试图在pvp中维护一个更新的文档，battle-arrowhead可以使用@Input访问该文档。我希望使用Observables实现这一点，方法是让pvp订阅一个firebase文档更改流，并在每次更改时更新其文档，然后将在子组件中反映这些更改。但是，当我在pvp中更新文档时，我没有看到battle-arrowhead中反映的更改。以下是我现在拥有的代码的重要部分：
pvp.component.html:
<app-battle-arrowhead
*ngIf="inArrowhead"
[matchDocument]="matchDocument"
(arrowheadPlacedEvent)="changeToTransition()"
></app-battle-arrowhead>pvp.component.ts:
setMatchDocument(document) {
this.matchDocument = document;
this.api
.getMatchValueChangesObservable(document.id)
.subscribe(this.onDocumentChange);
}
onDocumentChange(docChange) {
this.matchDocument = docChange;
console.log('changing match doc to ', JSON.stringify(this.matchDocument));
}这里，当在单独的匹配组件中找到匹配时，setMatchDocument由一个事件调用。
battle-arrowhead.component.ts:
@Input() matchDocument = 0;
test() {
console.log(JSON.stringify(this.matchDocument));
}我在firebase中做了一个修改，然后我看到了来自pvp.component.ts的console.log消息，说它正在将match文档更改为更新后的版本，然后，在arrowhead组件中，我有一个简单地调用test（）的按钮，这将打印文档的旧版本，而不是更新后的版本。
我遵循以下指南：
https://angular.io/guide/inputs-outputs
而且我已经把它们匹配得很好了。我也试着复制了一份文档，并把它设置为这个副本来触发更新，但是没有成功。我是不是误解了@input的工作原理？我是Angular 和 Ionic 新手，所以任何建议都是值得赞赏的。谢谢。
1条答案
按热度按时间oknrviil1#
matchDocument是什么类型？大多数代码都认为它是object，但您的箭头组件认为它是number。撇开这种不一致性不谈，这可能不是问题所在（尽管严肃地说，TS是一种类型化语言，所以要利用它来帮助处理代码中的上下文）。
看起来好像事物被适当地连接到工作上了--不，你可能没有误解输入是如何工作的;只要更新了整个对象
matchDocument，Angular就会检测到更改（而不是仅检测其中的值）。有可能你没有改变对象假设提供文档的底层服务提供了相同的文档。但是，您说您尝试复制对象（例如，可能是
this.matchDocument = {...this.matchDocument};之类的对象？），所以可能不是这样，尽管感觉确实是这样。您可以做一件事（我发现这对调试此类问题很有帮助），以找出问题发生的位置和时间以及进入我的组件的时间：把它分成
get和set。例如
这使您能够挂钩到
matchDocument的任何设置，并查看它何时发生以及每次发生时设置的值，以便您可以确保它 * 确实 * 发生。这不是一个答案，但如果你想知道发生了什么事，有时候这是一件有用的事情。