angular - Angular 2 中的双向绑定(bind)与 NgModel 和变异绑定(bind)属性？

Question

我正在使用 Angular 2 beta 5。

这是我的观点:

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

这是我的组件:

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

这种双向绑定(bind)的整个概念似乎工作正常。当我在该字段中键入一些文本并按回车键时，我可以看到 pendingMessage 确实是我在该字段中键入的任何内容。

但是，在下面我尝试将 pendingMessage 设置为 "blah" 的行中，我还期望这会更新文本字段以包含“blah”。为什么不是这样呢？这不是双向绑定(bind)的意义所在吗？

我知道 Angular 2 无法神奇地知道值何时发生变化，但我希望它会在评估事件后进行脏检查。有什么办法让它自动做这样的事情或以某种方式接受改变吗？我想避免使用 apply。

Answer 1

更新

添加ngDefaultControl

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

另见 https://github.com/angular/angular/issues/5360

**

我想这是 ngModel 实现的当前限制。它绑定(bind)到元素的 value 字段，但对于 textarea 它应该绑定(bind)到 text AFAIR 字段。 textarea 似乎触发了 ngModel 监听的事件，这使得它在一个方向上工作。

您可以通过实现自定义 ValueAccessor

来解决这个问题

另见
- ngModel custom ValuesAccessor
- Angular 2 custom form input
- Bind angular 2 model to polymer dropdown