关于Angular2模板引用变量的疑问

Question

<input #localInput>
<p>{{localInput.value}}</>

在Angular中，使用模板引用变量的使用问题，p标签显示input的value。
今天刚好学习到这里，但是在input中修改，p元素的值没有发生变化。写了一个click事件，p标签的值才改变，在组件中用setTimeout等异步事件有相同的效果。

<input #localInput>
<p>{{localInput.value}}</>
<button (click)="showValue(localInput.value)">打印input中的值</button>

请问一下这个是什么原理？

原谅新手问题多。。。

Answer 1

这个与Angular的更新机制有关系，只有做了异步事件，它才会更新绑定，下面就可以工作了。

<input #localInput (keyup)="0">
<p>{{localInput.value}}</p>