Почему привязка свойств не работает должным образом с переменной ссылки на шаблон?

Question

Я провожу эксперимент с Переменной ссылки на шаблон в Angular 7.

Подробно, я пытаюсь связать свойство "value" input с h1, но оно не обновляется соответствующим образомкогда я набираю в input.Обновление значения запускается только при вызове метода из компонента.

Вот мой HTML:

<input type="text" #input value="sss">
<button (click)="foo()">Update</button>

И в файле компонента.У меня есть пустой метод:

foo(){ }

Может кто-нибудь объяснить эту ситуацию конкретно?

Answer 1

Вы должны использовать input.value для доступа к значению ввода, в настоящее время вы передаете HTMLInputElement, а value является получателем для получения значения HTMLInputElement

show(lastName: any){
    console.log('the Input Element: ',lastName)
    console.log('the Input Element Value: ',lastName.value)
    this.showVariable = lastName.value;
   }

В шаблоне вы можете либо получить доступ к значению напрямую, либо через переменную компонента ... чтобы получить доступ к templateRef значению напрямую в html, используйте input.value

<p>
{{'Template Ref Value is: ' + input.value}}
</p>
<p>
  {{'Component value is: ' + showVariable}}
</p>

stackblitz

https://stackblitz.com/edit/angular-f4yezn?embed=1&file=app/input-overview-example.ts