Angular2 rc6 检查后发现表达式已更改

Question

我已经按照http://almerosteyn.com/2016/04/linkup-custom-control-to-ngcontrol-ngmodel上的教程创建了一个自定义元素。这是一个包含两个字段的表单：一个自定义组件和另一个通过ngmodel与相同字段关联的组件（输入字段）。当我在自定义组件中编辑值时，它会抛出异常“ORIGINAL EXCEPTION: Expression has changed after it was checked.”。然而，普通字段中的更改会正确触发到自定义元素。以下是代码：

<custom-component [control]="surname1" [(ngModel)]="person.surname1" [name]="'surname1'" formControlName="surname1">Add surname:</custom-component>

<input type="text" name="surname2" id="surname2" formControlName="surname1" [(ngModel)]="person.surname1" />

还有自定义元素：

const noop = () => {};

export const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => MyInputComponent2),
    multi: true
};

@Component({
    selector: 'custom-component',
    template: `<label><ng-content></ng-content></label>
                    <input type="text"  name="{{name}}" [(ngModel)]="value" 
                        (ngModelChange)="changed($event)"

                        (blur)="onBlur()"
                    />
    `,
    providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
})
export class CustomComponent implements ControlValueAccessor {

    @Input() control: FormControl;
    @Input() name: any;
    private innerValue: any = '';

    private onTouchedCallback: () => void = noop;
    private onChangeCallback: (_: any) => void = noop;

    //get accessor
    get value(): any {
        return this.innerValue;
    };

    //set accessor including call the onchange callback
    set value(v: any) {
        if (v !== this.innerValue) {
            this.innerValue = v;
            this.onChangeCallback(v);
        }
    }

    //Set touched on blur
    changed(event) {
        this.onTouchedCallback();
    }

    onBlur() {
        this.onTouchedCallback();
    }

    //From ControlValueAccessor interface
    writeValue(value: any) {
        if (value !== this.innerValue) {
            this.innerValue = value;
        }
    }

    //From ControlValueAccessor interface
    registerOnChange(fn: any) {
        this.onChangeCallback = fn;
    }

    //From ControlValueAccessor interface
    registerOnTouched(fn: any) {
        this.onTouchedCallback = fn;
    }
}

当使用enableProdMode();时可以解决问题，但在开发过程中无法使用

****错误（Chrome输出）：

core.umd.js:5995 异常：Error in ./MFormComponent class MFormComponent - inline template:55:117 caused by: Expression has changed after it was checked. Previous value: 'surtest'. Current value: 'surtes'.

core.umd.js:5997 原始异常：Expression has changed after it has been checked. Previous value: 'surtest'. Current value: 'surtes'

at ExpressionChangedAfterItHasBeenCheckedError.Error (native) at ExpressionChangedAfterItHasBeenCheckedError.BaseError [as constructor] (http://localhost:8085/templatetest/js/@angular/core/bundles/core.umd.js:1456:38) at new ExpressionChangedAfterItHasBeenCheckedError (http://localhost:8085/templatetest/js/@angular/core/bundles/core.umd.js:8078:20)

- kandan

---

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Günter Zöchbauer

我添加了问题，不确定它是否有助于解决问题。 - kandan

Answer 1

我猜这是因为您在<custom-component>和<input>中使用了相同的formControlName="surename1"。如果您想将它们绑定到同一模型，则只需将ngModel指向该模型，但为每个控件创建一个控件。

- Günter Zöchbauer

---

是的，它可以工作，尽管我想使用相同的控件名称（认为在兄弟组件中传播更改的方法会有，但在类似的帖子中没有找到）。将其保留为解决方案。 - kandan