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

Question

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

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

我试图运行此示例代码，并且希望在输入文本框中输入的文本显示在它旁边。但是，这种方式不起作用。我在组件内部没有该变量作为viewChild，因为在Angular文档页面中未提及。您能在这里建议我的错误是什么，或者我的理解是错误的吗？

我的示例代码：

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事件监听器，因此角度在触发时将运行更改检测，例如可以是keyup：

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

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

Answer 2

如果您查看文档提供的示例，则可以在父div元素中找到（keyup）=“ 0”（请参见下图）。不幸的是，文档中没有提到这一点。