Angular-在组件模板中声明变量

Question

我必须基于文本框中的值来禁用/启用按钮。

这是我目前的做法

<input [(ngModel)]="confirmationText" type='text'>
<button [disabled]="confirmationText != 'yes'">Delete</button>

问题：这行得通，但是我必须在我的component.ts文件中声明confirmationText ，并且只能在模板中使用它，所以我正在寻找一种在组件的模板中声明它的方法，以便保留我的组件类清洁。

Stackblitz

Answer 1

您可以使用模板引用变量来实现所需的功能。 请注意，必须在输入元素上设置ngModel指令，以使其起作用。

<input #textInput type="text" ngModel>
<button [disabled]="textInput.value !== 'yes'">Delete</button>

有关演示，请参见此堆叠闪电战 。

Answer 2

您必须像这样在模板引用中获取值

<input [(ngModel)]="confirmationText" type='text' #myInput> <button [disabled]="myInput.value != 'yes'">Delete</button>

看我的解决方案

stackblitz