ボタンはページの初期化時に無効にはなりませんが、クリックすると無効になります。

Question

非常に単純なページを作成しました。inputフィールドとbuttonです。 inputフィールドが空の場合、buttonを無効にする必要があります。ユーザーがそれをクリックすると、入力フィールドはクリアまたはリセットされます。 マイボタンをクリックすると、そのボタンは無効になります。しかし、それは最初から無効にされていません。 私のコードは次のとおりです。

HMTL

<input type= 'text' [(ngModel)]="userName"> 

{{userName}} 

<button[disabled]="userName==''(click)='resetUsername()'>RestUsername</button> 

活字体：

import {Component} from '@angular/core'; 

@Component({ 
    selector : 'app-server', 
    templateUrl :'./server.component.html'    
}) 
export class Servercl { 
    username='' 

    resetUsername = function(){ 
     this.userName=''; 
    }   
} 

私が間違っているつもりだところ教えてください。角4は私には新しいものです。 私は、最初からuserNameを空にしています。問題が何であるか理解できません。何か不足していますか？

Answer 1

変数名の部分はすべて小文字のusernameです。しかし、inputとbuttonの添付変数は、名前がuserNameです。したがって

username !== userName 
-----------------^-- 

同じようにしてください。また、buttonテンプレートに何らかのエラーがあります。

<button[disabled]="username === ''" (click)='resetUsername()'>RestUsername</button>