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

【问题标题】：Angular - Declare variable within component templateAngular - 在组件模板中声明变量
【发布时间】：2018-07-11 23:36:56
【问题描述】：

我必须根据文本框中的值禁用/启用按钮。

这就是我目前的做法

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

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

【问题讨论】：

标签： angular

【解决方案1】：

您可以使用template reference variable 来实现您想要的。请注意，必须在输入元素上设置ngModel 指令才能使其工作。

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

请参阅this stackblitz 以获取演示。

【讨论】：

【解决方案2】：

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

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

看看我的解决方案

【讨论】：

感谢解答，但是没有ngModel指令是不行的，比如试试这个<input type='text' #myInput>
@cyberpirate92 - 这个答案应该有效，因为在输入元素中设置了 ngModel 指令。但是，它涉及到在组件类中声明confirmationText，这是您要避免的。