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 更改时更改taxpercent，这些hsn / srno在RWTaxComponent本身中不会更改，它会被父组件更改。

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

我错误地理解了Angular2的生命周期吗？

请建议正确的方法......

Answer 1

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

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

解决方案2 :(可能不起作用）尝试使用setTimeout方法发出值

Angular2绑定引发错误“表达式在检查后已更改”

1 个答案: