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