Question

我正在使用Angular 7中的模板参考变量进行实验。

详细来说，我正在尝试将input的“ value”属性绑定到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;
   }

在模板中，您可以直接访问值，也可以通过组件变量...直接在html中使用templateRef来访问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

为什么属性绑定不能与模板引用变量一起正常工作？

1 个答案: