Angular2 绑定引发错误"Expression has changed after it was checked"

Question

因为我有如下父组件和子组件，

子组件(RWTaxComponent)

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'rw-tax',
templateUrl: 'rw.tax.component.html'
})
export class RWTaxComponent implements OnInit {
@Input() hsn: string = '';
@Input() srno: string = '';
@Input() taxPercent: number;
@Output() taxPercentChange: any = new EventEmitter();
constructor(
) { }
ngOnInit() {
}
ngOnChanges(event) {
console.log('HSN:: '+this.hsn);
console.log('SRNO:: '+this.srno);
if (this.hsn && this.srno) {
// Doing my logic here to find taxPercent
this.taxPercentChange.emit(this.taxPercent);
}
}}

子组件模板 (rw.tax.component.html) 是，

<p>{{taxPercent | number:'1.2-2'}}</p>

我在父组件中调用了上述子组件，如下所示，

<rw-tax [(hsn)]="lineItem.hsn" [(srno)]="lineItem.srno" [(taxPercent)]="lineItem.taxPercent"></rw-tax>

每当更改 hsn/srno时，我想更改税收百分比，这些 hsn/srno 本身不会RWTaxComponent更改，而是由父组件更改。

所以我使用ngOnChanges()事件来检测 hsn/srno 是否发生了变化，当我在父组件中更改 hsn 和 srno 时，它就会被调用。 但问题是在执行我的逻辑以查找 taxpercent 之后，我试图通过this.taxPercentChange.emit(this.taxPercent);更新父组件中的值并收到错误"表达式在检查后已更改">

我是否误解了 Angular2 生命周期？

请提出一个正确的方法...

Answer 1

当组件的输入发生变化时，以及如果我们尝试更改或发出任何属性，则会发生此问题。

解决方案 1： 尝试承诺解决更改，然后阻止发出输出事件。

解决方案2：(可能不起作用) 尝试在发出值时设置超时方法