模板

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

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

但是，在我尝试将pendingMessage设置为"blah"的下面一行中，我还希望将文本字段更新为包含“blah”。为什么不是这样？这不是双向绑定的重点吗？

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

Answer 1

<强>更新

添加ngDefaultControl

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

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

**

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

您可以通过实施自定义ValueAccessor

来解决此问题

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

Answer 2

对于绑定textarea值，您可以使用change-function：

模板

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

组件

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

Angular 2中的双向绑定与NgModel和突变绑定属性？

2 个答案:

模板

组件