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

Question

我的问题是关于角度模板输入变量的Angular文档中解释的一个例子。

https://angular.io/guide/template-syntax#expression-context

我试着运行这个示例代码，我希望输入文本框中输入的文本显示在它旁边。但是，它不起作用。我没有将此变量作为组件内的viewChild，因为Angular doc Page中没有提到它。你能在这里建议我的错误是什么，或者我的理解是不正确的？

我的示例代码：

app.component.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的初学者，这可能是一个非常基本的错误。但是，我会使用您的反馈来更好地学习和理解。谢谢。

Answer 1

在这种情况下，最好在组件中使用支持字段value，您可以通过双向绑定[(ngMode)]="value"绑定输入值，然后您可以使用该字段使用已经熟悉的绑定（如{{value}}）显示值。但是如果你想运行这个例子，你需要添加一些dom事件监听器，所以angular会在它触发时运行变化检测，例如可能是keyup：

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

更改检测它是一个单独的主题。我不知道为什么他们在角度页面上放了这样的例子。希望有所帮助。