Пример документации Angular: ссылочная переменная шаблона Angular не работает должным образом

Question

Мой вопрос касается примера, описанного в угловой документации для угловой переменной ввода шаблона.

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

Я попытался запустить этот пример кода, и я ожидаю, что текст, введенный в поле ввода текста, будет отображаться рядом с ним.Тем не менее, это не работает таким образом.У меня нет этой переменной как viewChild внутри компонента, так как она не упоминается на странице Angular doc.Не могли бы вы предложить здесь, в чем заключается моя ошибка или мое понимание неверно?

Мой пример кода:

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 в компоненте , к которому можно привязать значение входа через twoспособ привязки [(ngMode)]="value", после этого вы можете использовать это поле для отображения значения , используя уже знакомую привязку, такую ​​как {{value}}.Но если вы хотите запустить в этом примере , вам нужно добавить некоторый слушатель событий dom , поэтому angular будет запускать обнаружение изменений при его запуске, это может быть keyup например:

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

Обнаружение изменений это отдельная тема.Я не знаю, почему на угловой странице они ставят такой пример.Надеюсь, это поможет.