Question

尝试让双向绑定工作，但在检查异常后更改表达式。当模式更改为取消并且我想将值重置为空时，我得到异常。我认为这是因为我在一个具有不同价值但却不知道如何避免的更改周期内部发出？

<edit-field [mode]="mode" [(field)]="field"></edit-field>

我的组件是：

 export class EditFieldComponent implements OnChanges {
      @Input('mode') mode: string;
      @Input('field') field: string;
      @Output('fieldChange') fieldChange: EventEmitter<string> = new EventEmitter<string>();

     ngOnChanges() {
         if(this.mode == 'cancel'){
         this.field = "";
         this.fieldChange.emit("");
    }
  }
}

Answer 1

当变更检测导致模型更改时，Angular不喜欢。变更检测会调用ngOnChanges。

将代码移动到另一个不会导致此错误的回调（我认为ngAfterViewChecked有效）或使用setTimeout()

 export class EditFieldComponent implements OnChanges {
      @Input('mode') mode: string;
      @Input('field') field: string;
      @Output('fieldChange') fieldChange: EventEmitter<string> = new EventEmitter<string>();

     ngOnChanges() {
         if(this.mode == 'cancel'){
           setTimeout(() => {
             this.field = "";
             this.fieldChange.emit("");
           });
         }
    }
  }
}

Angular 2 way绑定组件 - 表达式在检查后发生了变化

1 个答案: