如何在Angular 2中进行简单的文本输入绑定？

Question

我正在尝试将do a simple binding from an Angular2组件添加到模板中。我的模板代码看起来像这样......

<textarea class="left-side" #newLeft (keyup)="enterLeftText($event, newLeft)"></textarea>

<textarea class="right-side">{{leftText}}</textarea>

然后在我的组件中我有以下内容......

enterLeftText($event, newLeft) {
  this.leftText = newLeft.value;
}

问题是newLeft总是未定义的。我错过了什么？

Answer 1

您发现了一个有趣的错误，因为我们似乎无法在#id绑定中使用大写。

只需将newLeft替换为newleft即可解决您的问题：

http://plnkr.co/edit/ngqd0cUXyxsgBKOBSr9S?p=preview

<小时/> UPDATE ：实际上看起来id应该是破折号并且变量是camel case，因为在绑定属性时Angular 1就是这种情况。

所以问题的真正答案是写#new-left：

<textarea class="left-side" #new-left (keyup)="enterLeftText($event, newLeft)"></textarea>

Answer 2

当使用“＃new-left”时，我得到一个例外

  

EXCEPTION：错误：未捕获（在承诺中）：模板解析错误：“ - ”是   变量名中不允许

使用camelCased变量名的解决方案现在可以正常使用。