如何在 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 即可解决您的问题：

UPDATE：事实上，id 应该用破折号表示，变量是驼峰式，就像 Angular 1 绑定属性时的情况一样。

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

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

Answer 2

使用“#new-left”时出现异常

EXCEPTION: Error: Uncaught (in promise): Template parse errors: "-" is not allowed in variable names

驼峰式变量名的解决方案现在对我来说工作正常。

How to do a simple text input bind in Angular 2?