Angular模板引用变量进行数据绑定页面数据值不改变、不刷新的问题

问题描述

本文是关于angular的模板引用变量数据绑定的问题

在使用angular模板引用变量时，输入后不更新页面绑定值，页面不刷新，接下来我展示两段代码，大家有兴趣可以尝试一下。

代码示例

这样使用模板引用变量，是不起作用的：

@Component({
selector: 'app-test', 
template: ` <input #box> <p>{{box.value}}</p> ` }) 
export class TestComponent { }

这段代码运行一下，你会发现当进行输入时，页面显示并没有什么变化，
再尝试运行下面的代码：

@Component({ 
selector: 'app-test', 
template: ` <input #box (keyup)=’0’> <p>{{box.value}}</p> ` }) 
export class TestComponent { }

运行这段代码，页面上的值会没敲一次键盘就变化，那么这到底是为什么呢？
这和angular的数据绑定原理有关，来看一段关于这个解释的angular的官方文档：

Angular updates the bindings (and therefore the screen) only if the
app does something in response to asynchronous events, such as
keystrokes. This example code binds the keyup event to the number 0,
the shortest template statement possible. While the statement does
nothing useful, it satisfies Angular’s requirement so that Angular
will update the screen.

译：只有在应用做了些事情来响应异步事件（如击键），Angular 才更新绑定（并最终影响到屏幕）。 本例代码将 keyup事件绑定到了数字
0，这可能是最短的模板语句了。 虽然这个语句没有用，但它满足 Angular 的要求，所以 Angular 将更新屏幕。

从官方文档中我们可以知道，angular只有在响应了某些异步事件（这里是事件绑定）后，才会对绑定进行更新，当没有keyup事件时，angular不进行更新box.value，当绑定了keyup事件，即使里面只有一个数字0语句，也是响应了keyup事件，然后对绑定进行更新。

结语

这是我最近踩到的一个关于angular模板引用变量绑定更新的坑，写出来以解决同学们遇到的相似问题。

希望能够解决大家工作和学习中的一些疑问，避免不必要的时间浪费，有不严谨的地方，也请大家批评指正，共同进步！

转载请注明出处，谢谢！
交流方式：QQ1670765991