Angular2 - 雙向綁定錯誤：檢查後表達式已更改

我正嘗試創建一個簡單的組件來輸入文本。但是，如果其值發生更改，則會發生錯誤。Angular2 - 雙向綁定錯誤：檢查後表達式已更改

我已經檢查了一些關於這個錯誤的文章。其中一人說'應該使用enableProdMode（）'。這當然是對的，但我認爲這不是一個重要的解決方案。

請讓我知道一個不錯的解決方案比enableProdMode（）。

@Component({ 
    selector: 'text-input', 
    template: '<input type="text" [(ngModel)]="value"/>', 
    inputs: [ 
     'value' 
    ] 
}) 
export class TextInput implements DoCheck { 
    @Input() value: string; 
    @Output() valueChange: EventEmitter<string> = new EventEmitter(); 

    ngDoCheck(): void { 
     console.log(`ngDoCheck: value=${this.value}`); 
     this.valueChange.emit(this.value); 
    } 
}

@Component({ 
    template: ` 
     <h1>Input Components</h1> 
     <h2>Text Input</h2> 
     <div> 
      <text-input [(value)]='textValue'></text-input> 
     </div> 
     <div>{{textValue}}</div>` 
}) 
export class InputsPage { 
    textValue: string = 'Hello World'; 
}

來源

2017-02-01 Yusuke Masuda

我想你只需要從輸入中移除偏愛，就像這樣：''。我認爲發生錯誤是因爲應該沒有雙向數據綁定。 –

@alexkucksdorf這裏的要點是當孩子發生變化時能夠通知父母的雙向綁定。所以這裏需要雙向綁定:) – Alex

你並不需要使用DoCheck這一點，如果你只是想告訴家長時，變化已經發生，用ngModelChange代替，放出的價值。所以加ngModelChange

<input type="text" [(ngModel)]="value" (ngModelChange)="emitValue()"/> 

@Input() value: string; 
@Output() valueChange: EventEmitter<string> = new EventEmitter(); 

emitValue(): void { 
    this.valueChange.emit(this.value); 
}

而且你應該都很好！希望這可以幫助！

來源

2017-02-01 13:04:08 Alex

謝謝你的建議。這對我來說很有用。這是很好的幫助！ –

不客氣，很高興幫助！ :)如果這個答案解決您的問題，你會不會介意通過點擊答案的投票下的灰色刻度接受這個答案，這裏是接近的細節如何做到這一點：http://meta.stackexchange.com/a/5235 :) – Alex

對不起，我還沒有明白規則。我點擊它標記爲已關閉。感謝您告訴我如何在stackoverflow上運行。 –

Angular2 - 雙向綁定錯誤：檢查後表達式已更改

回答

相關問題