Angular 角度文档示例：角度模板引用变量未按预期工作

我的问题是关于Angular文档中解释的关于Angular模板输入变量的示例

我尝试运行此示例代码，希望输入文本框中输入的文本显示在其旁边。然而，它不是这样工作的。我在组件中没有这个变量作为viewChild，因为AngularDoc页面中没有提到它。你能告诉我什么是我的错误或我的理解是错误的吗

我的示例代码：

应用程序组件.ts

import { Component } from '@angular/core';

import { Hero } from './hero';

@Component({
  selector: 'app-root',
  template: `

  <h1>{{title}}</h1>

  <label>Type something:
  <input #customerInput>{{customerInput.value}}
</label>
`,
styleUrls:["app.component.css"]
})

export class AppComponent {
  testInput = "Hello"
  title = 'Tour of Heroes';
  recommended = true;

}

从'@angular/core'导入{Component}；
从“/Hero”导入{Hero}；
@组成部分({
选择器：'应用程序根'，
模板：`
{{title}}
键入以下内容：
{{customerInput.value}
`,
样式URL:[“app.component.css”]
})
导出类AppComponent{
testInput=“你好”
标题=‘英雄之旅’；
建议=正确；
}

输出：

---

由于我是一个有棱角的初学者，这可能是一个非常基本的错误。不过，我会利用你的反馈来更好地学习和理解。谢谢。

在这种情况下，最好在组件中使用支持字段

值

，您可以通过双向绑定将输入值绑定到该字段

[（ngMode）]=“value”

，之后，您可以使用该字段来显示值，使用已经熟悉的绑定，如

{{value}

。但是如果您想运行这个示例，您需要添加一些dom事件侦听器，这样当它触发时，将运行更改检测，它可以是

键控

，例如：

<input #customerInput (keyup)="true">{{customerInput.value}}

{{customerInput.value}

---

变化检测这是一个单独的主题。我不知道他们为什么在这一页上举这样的例子。希望对您有所帮助。

如果您检查所给出的示例以及可以在父div元素中找到的文档（keyup）=“0”（检查下图）。不幸的是，文件中没有提到这一点