Angular2-通知子对象父对象已更改，以便子对象可以在其模板内重新填充ngIf

Question

我有一个与这个问题类似的问题，但这个问题似乎已经过时了，因为这两个答案都不适合我。

子组件只是从作为输入传递的名为Proposal的复杂对象中呈现数据(它根本没有用户控件，因此不需要激发任何事件或传递任何内容)。

@Component({
selector: 'fb-proposal-document',
templateUrl: './proposal-document.component.html',
styleUrls: ['./proposal-document.component.css']
})
export class ProposalDocumentComponent implements OnInit, OnDestroy {
@Input() proposal: Proposal;
constructor()
}

模板的相关部分是，使用*ngIf:迭代数组并检查属性以显示不同的文本

<li class="section" *ngFor="let qp of proposal?.quoted_products">
<li class="section" *ngFor="let room of qp?.rooms">
...
<div class="row">
<div class="col-md-12">
Supply
<span *ngIf="room.is_fitted">
and install
</span>
<span *ngIf="!room.is_fitted">
only
</span>                    
</div>
</div>
...                
</li>
</li>

在父级中，用户可以单击复选框将"is_fitted"更改为true或false。父级正在使用域驱动器窗体。在父级的ngOnInit中是以下代码：

this.myForm.controls['isFitted'].valueChanges.subscribe(
value => {
this.proposal.is_fitted = value;
let qp = this.proposal.quoted_products[this.qpCurrentIndex];
qp.rooms.forEach(function(room) {
room.is_fitted = value;
});
}
);  

其正确地更新属性。如果我console.log，我可以看到。所以问题是，当嵌入的room.is_fitted值发生变化时，我如何让孩子重新编写/处理*ngIf？

我已经尝试过使用ViewChild来实现这个想法，所以ngOnInit中的上述代码变成了：

this.myForm.controls['isFitted'].valueChanges.subscribe(
value => {
this.proposal.is_fitted = value;
let qp = this.proposal.quoted_products[this.qpCurrentIndex];
qp.rooms.forEach(function(room) {
room.is_fitted = value;
});
this.proposalDocument.notifyChange(this.proposal);
}
);

但这也不起作用。我的通知孩子的更改被成功调用：

notifyChange(proposal: Proposal) {
console.log('I changed');
this.proposal = proposal;
}

但是视图不更新-CCD_ 7逻辑不被重新处理。

Answer 1

我拿出所有的代码，从头开始重新编写，我的第一次尝试现在就成功了：

this.myForm.controls['isFitted'].valueChanges.subscribe(
value => {
this.proposal.is_fitted = value;
let qp = this.proposal.quoted_products[this.qpCurrentIndex];
qp.rooms.forEach(function(room) {
room.is_fitted = value;
});
}
); 

我根本不需要通知孩子。视图会自动更新。

从我所读到的一切中，我确信复杂的对象不会更新深层属性——只有当你更改对对象本身的引用时。但在这里，我现在正在更改深层属性，并且我不会通过调用ngOnChanges来通知孩子，这是有效的。想想看。

Answer 2

更新

看看我的另一个答案，因为现在这一切似乎都没有必要。但我会把它留在这里，因为它可能会帮助别人。

---

根据@JBNizet在问题评论中提供的链接，我尝试了这个解决方案：

ngOnChanges(changes: SimpleChanges){
console.log('I changed ngOnChanges');
console.log(changes);
for (let propName in changes){
if (propName == 'is_fitted') {
this.proposal.quoted_products.forEach(function(qp) {
qp.rooms.forEach(function(room) {
room.is_fitted = changes[propName].currentValue;
});
});
}
};
};

因此，父级没有调用我的自定义notifyChange，而是调用这个ngOnChanges方法，如下所示：

this.myForm.controls['isFitted'].valueChanges.subscribe(
value => {
this.proposal.is_fitted = value;
this.proposalDocument.ngOnChanges({
is_fitted: value 
});
}
); 

新值到达子级，我可以看到它记录在控制台中，属性在模型上更新，视图NOW更新。

我确实想知道这是否有效，以及我是否应该在这个双环之前和之后分离和重新连接，就像这样：

for (let propName in changes){
if (propName == 'is_fitted') {
console.log('detaching');
this.ref.detach();
this.proposal.quoted_products.forEach(function(qp) {
qp.rooms.forEach(function(room) {
room.is_fitted = changes[propName].currentValue;
});
});
this.ref.reattach();
this.ref.detectChanges();
}
};

有关detectChanges()的更多信息，请参阅本官方指南。