Dwukierunkowe wiązanie w Angular 2 z NgModel i muting bound property?

Question

Używam kątowa 2 Beta 5.

Oto mój widok:

<textarea [(ngModel)]="pendingMessage" (keydown.enter)="sendMessage()"></textarea> 

A oto mój komponent:

@Component({ 
    //... 
}) 
export class AppComponent { 
    private _pendingMessage: string; 

    public get pendingMessage() { 
     return this._pendingMessage; 
    } 

    public set pendingMessage(value: string) { 
     this._pendingMessage = value; 
    } 

    constructor() { 
     this.pendingMessage = "initial stuff"; //this shows up in the text field initially 
    } 

    public sendMessage() { 
     console.log(this.pendingMessage); //here, pending message is indeed whatever I typed in the text field 
     this.pendingMessage = "blah"; 
     //here I expected the textfield to now contain "blah", but it doesn't 
    } 
} 

Cała koncepcja tej wiążącej dwukierunkowych wydaje się działać w porządku. Kiedy wpisuję tekst w polu i wciskam Enter, widzę, że pendingMessage jest rzeczywiście tym, co wpisałem w polu.

Jednak w wierszu poniżej, gdzie próbuję ustawić pendingMessage na "blah", oczekiwałem również, że zaktualizuje pole tekstowe, aby zawierało "bla". Dlaczego tak nie jest? Czy nie jest to kwestia dwukierunkowego wiązania?

Wiem, że Angular 2 nie może w magii wiedzieć, kiedy wartości się zmieniają, ale miałem nadzieję, że zrobi brudną kontrolę po ocenie zdarzenia. Czy jest jakiś sposób, aby zrobić to automatycznie lub jakoś podnieść zmianę? Chciałbym uniknąć używania apply.

Answer 1

Aktualizacja

Dodaj ngDefaultControl

<paper-input ngDefaultControl [(ng-model)]="address"> 

Zobacz także https://github.com/angular/angular/issues/5360

**

Chyba jest to ograniczenie prądu realizacji ngModel. Wiąże się z polem elementu, ale dla textarea jest to pole AFAIR, do którego powinno się przypisać. Wydaje się, że textarea wywołuje zdarzenie, które ngModel nasłuchuje, co powoduje, że działa on w jednym kierunku.

Można obejść ten problem poprzez wprowadzenie zwyczaju ValueAccessor

Zobacz również
- ngModel custom ValuesAccessor
- Angular 2 custom form input
- Bind angular 2 model to polymer dropdown

Answer 2

Dla wiązania wartości textarea można użyć Zamiana funkcji:

Szablon

<textarea id="some-value" (change)="doTextareaValueChange($event)">{{textareaValue}}</textarea> 

Komponent

export class AppComponent implements OnInit { 
    private textareaValue = ''; 
    doTextareaValueChange(ev) { 
    try { 
     this.textareaValue = ev.target.value; 
    } catch(e) { 
     console.info('could not set textarea-value'); 
    } 
    } 
}