Angular 角度2-禁用按钮上的意外行为

在我的应用程序中，我最初禁用了一个按钮。如果输入字段已填充，则按钮已启用，但存在奇怪的行为。如果禁用，图标将被禁用且不可点击（这显然是正确的）。在输入字段中的某个数字上，按钮会更改类别并启用，但图标不会更改，尽管可以单击按钮（这很奇怪）。如果我单击输入字段，图标会发生变化，手部图标将可见，而不是禁止信号。预期的行为是在输入字段中的数字上立即显示手形图标， 这是我的代码：

<button (click)='onClick()' [disabled]="isDisabled" [class]="checkValid()" type="submit">Search</button>

checkValid() {
   if (this.myInput != "") {
            this.isDisabled= false;
            return "btn btn-primary";
        } else {
            this.isDisabled= true;
            return "btn btn-primary disabled";
        }
    }

搜索
checkValid（）{
如果（this.myInput！=“”）{
此.isDisabled=false；
返回“btn btn primary”；
}否则{
此.isDisabled=true；
返回“btn btn主禁用”；
}
}

---

有什么建议吗？

以下是适用于您的应用程序的解决方案：

最好使用[ngClass]，而不仅仅是[class]。并尽量避免HTML中的返回状态，因为您的方法将在一个周期内工作

我已经添加了ngClass语句，并在输入字段中添加了（keyup）='checkValid（）

@Component({
  selector: 'my-app',
  template: `
    <input type="text" [(ngModel)]="myInput" (keyup)='checkValid()'>
    <button (click)='onClick()' [disabled]="isDisabled" class='btn btn-primary' [ngClass]="{'disabled': isDisabled}" type="submit">Search</button>
  `,
})
export class App {
  isDisabled: boolean = true;
  myInput: string = '';

  constructor() {
  }

  checkValid() {
   if (this.myInput != "") this.isDisabled= false;
   else this.isDisabled= true;
  }

  onClick(){

  }
}

@组件({
选择器：“我的应用程序”，
模板：`
搜寻
`,
})
导出类应用程序{
isDisabled:boolean=true；
myInput:string=''；
构造函数（）{
}
checkValid（）{
如果（this.myInput！=“”）this.isDisabled=false；
否则.isDisabled=true；
}
onClick（）{
}
}

浮游生物：

---

以下是适用于您的应用程序的解决方案：

最好使用[ngClass]，而不仅仅是[class]。并尽量避免HTML中的返回状态，因为您的方法将在一个周期内工作

我已经添加了ngClass语句，并在输入字段中添加了（keyup）='checkValid（）

@Component({
  selector: 'my-app',
  template: `
    <input type="text" [(ngModel)]="myInput" (keyup)='checkValid()'>
    <button (click)='onClick()' [disabled]="isDisabled" class='btn btn-primary' [ngClass]="{'disabled': isDisabled}" type="submit">Search</button>
  `,
})
export class App {
  isDisabled: boolean = true;
  myInput: string = '';

  constructor() {
  }

  checkValid() {
   if (this.myInput != "") this.isDisabled= false;
   else this.isDisabled= true;
  }

  onClick(){

  }
}

@组件({
选择器：“我的应用程序”，
模板：`
搜寻
`,
})
导出类应用程序{
isDisabled:boolean=true；
myInput:string=''；
构造函数（）{
}
checkValid（）{
如果（this.myInput！=“”）this.isDisabled=false；
否则.isDisabled=true；
}
onClick（）{
}
}

浮游生物：

---

你能给我们看一下模板吗？你不需要像那样返回到单独的类。Css会自动知道按钮是否被禁用，并自行应用禁用属性。你能给我们展示一下模板吗？你不需要像那样返回到单独的类。Css将自动知道按钮是否被禁用，并自行应用禁用属性。避免仅点代码回答。解释一下你改变了什么以及为什么，这样对未来的访问者会有用。对不起。好的，我会的汉克斯·尼古拉，你的答案对我很有用，但我做了一个改变。我需要使用（ngModelChange）=“checkValid（）”而不是keyup来捕获输入上的重置事件（单击输入中的“x”图标）。避免只使用点代码。解释一下你改变了什么以及为什么，这样对未来的访问者会有用。对不起。好的，我会的汉克斯·尼古拉，你的答案对我很有用，但我做了一个改变。我需要使用（ngModelChange）=“checkValid（）”而不是keyup来捕获输入上的重置事件（单击输入中的“x”图标）。