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

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