Ràng buộc hai chiều trong Góc 2 với NgModel và biến đổi thuộc tính bị ràng buộc?

Question

Tôi đang sử dụng góc 2 beta 5.

Dưới đây là quan điểm của tôi:

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

Và đây là thành phần của tôi:

@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 
    } 
} 

Khái niệm toàn bộ này hai chiều ràng buộc dường như được làm việc ổn thỏa. Khi tôi gõ một số văn bản trong lĩnh vực này và nhấn Enter, tôi có thể thấy rằng pendingMessage thực sự là bất cứ điều gì tôi đã gõ vào lĩnh vực này.

Tuy nhiên, trong dòng bên dưới, nơi tôi cố gắng đặt pendingMessage thành "blah", tôi cũng mong muốn cập nhật trường văn bản này chứa "blah". Tại sao điều này không đúng? Đó không phải là điểm liên kết hai chiều sao?

Tôi biết rằng Angular 2 không thể biết một cách kỳ diệu khi giá trị thay đổi, nhưng tôi hy vọng nó sẽ thực hiện kiểm tra bẩn sau khi đánh giá sự kiện. Có cách nào để làm cho nó làm một điều như vậy tự động hoặc bằng cách nào đó nhận sự thay đổi? Tôi muốn tránh sử dụng apply.

Answer 1

Cập nhật

Thêm ngDefaultControl

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

Xem thêm https://github.com/angular/angular/issues/5360

**

Tôi đoán đây là một hạn chế hiện nay của việc thực hiện ngModel. Nó liên kết với trường value của phần tử nhưng đối với textarea đó là trường AFAIR text cần liên kết với. Có vẻ như textarea kích hoạt sự kiện mà ngModel lắng nghe mà làm cho nó hoạt động theo một hướng.

Bạn có thể làm việc này bằng cách thực hiện một tùy chỉnh ValueAccessor

Xem thêm
- ngModel custom ValuesAccessor
- Angular 2 custom form input
- Bind angular 2 model to polymer dropdown

Answer 2

Đối với ràng buộc giá trị textarea bạn có thể sử dụng sự thay đổi chức năng:

Mẫu

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

Component

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