如何将 [disabled] = "true" 添加到 Angular 中的按钮标签答案

【问题标题】：How do I add [disabled] = "true" to the button tag in Angular如何将 [disabled] = "true" 添加到 Angular 中的按钮标签
【发布时间】：2020-07-16 12:40:58
【问题描述】：

我自己正在编写 html 标签作为组件。我想禁用登录按钮，因为打开页面时我收到的用户名和密码输入是空白的。由于我创建了自己的按钮组件，您找不到怎么做，您能帮忙吗？

button.component.ts

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

@Component({
  selector: 'ng-idea-button, button[ng-idea-button], a[ng-idea-button]',
  inputs: ["icon"],
  template: `
    <ng-idea-icon *ngIf="icon" [name]="icon"></ng-idea-icon>
    <span><ng-content></ng-content></span>
  `,
  host: {
    'class': 'btn btn-primary',
    '[class.btn-icon]': 'icon'
  }
})
export class ButtonComponent implements OnInit {

  public icon?: string | null;

  constructor() {}

  ngOnInit(): void {
  }

}

login.component.html

<button ng-idea-button class="text-center" type="submit" [disabled]="false">Login</button>
<button ng-idea-button class="text-center" type="submit" [disabled]="true">Login</button>

【问题讨论】：

标签： angular typescript components

【解决方案1】：

您很亲密，请使用[disabled]="condition" 而不是disabled="condition"

后者不起作用，因为您实际上只是将字符串传递给disabled 属性，并且由于任何非空字符串都等于true，因此您的按钮都被禁用了。

演示：https://stackblitz.com/edit/angular-disabled-custom-button

【讨论】：