Question

我制作了一个非常简单的页面，其中包含input字段和button。当button字段为空时，我必须禁用input。用户点击后，输入字段将被清除或重置。单击它后，我的按钮被禁用。但它从一开始就没有禁用。我的代码是：

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='';
   }         
}

请告诉我哪里出错了。 Angular 4对我来说是新的。我从一开始就将userName设为空。不明白问题是什么。我错过了什么吗？

Answer 1

您的变量名称部分全部为小写：username。但是，input和button的附加变量名称为userName。所以

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

尝试使它们相同。您在button模板中也有一些错误。

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

在页面初始化时未禁用按钮，但单击它后将禁用该按钮

1 个答案: