Question

我在Angular 5上比较陌生，我有一个像这样的按钮：

          <button *ngIf="type!='invoices' && this.action==='edit'" disabled (click)="genera(fields.termini)" class="ml-16 mat-raised-button mat-accent" mat-raised-button="" disabled color="primary">Genera fattura</button>

我需要向我的component.ts添加另一个条件，仅当选中循环中的一个复选框时，才能启用此按钮。这是我的循环：

   genera(model) 
   {
    for (let scadenza of this.model.partial_payments) 
    {
      if (scadenza.fattura === true && scadenza.payed != '') 
      {
        alert('Funziona');
      }
    }
  }

Answer 1

这里发生了很多事情。首先，在您的html中，您两次设置了disabled，您的编辑器应该对此抱怨。其次，您需要一个后备字段来将您的disabled状态绑定到。然后，您需要像这样[disabled]="myBackingField"绑定禁用的对象。如果是我，我会将其绑定到组件或模型中的吸气剂。这是一个示例，说明如何创建封装此逻辑的吸气剂：

get anyPartialHasFattura(): boolean {
  for (let scadenza of this.model.partial_payments) {
    if (scadenza.fattura === true) {
      return true;
    }
  }
  return false;
}

这是您的按钮的精简版本，它将disabled绑定到此新字段：

<button [disabled]="anyPartialHasFattura">Genera fattura</button>

最后，here's a quick stackblitz I put together to show this in action。尝试单击这些复选框之一，然后查看按钮上禁用状态的状态。

关于[disabled]="someBoolean"为何起作用的最后说明。在HTML中将disabled表示为false的唯一实际有效方法是完全省略disabled属性。那为什么行得通呢？您应该阅读this section of the Angular docs的模板语法。我将包括一些特别相关的引号：

稍后，您将获得该特殊的括号符号。看着   除此之外，您的直觉表明您将绑定到按钮的   disabled属性并将其设置为当前的值   组件的isUnchanged属性。

您的直觉是不正确的！您每天的HTML心理模型是   误导。实际上，一旦开始数据绑定，您将不再   使用HTML 属性。您没有设置属性。你是   设置DOM元素，组件和指令的 properties 。

...

disabled属性是另一个特殊的示例。一个按钮的   默认情况下，disabled属性为false，因此启用了按钮。什么时候   您添加了disabled属性，它的存在会单独初始化   按钮的disabled属性设置为true，因此该按钮被禁用了。

添加和删除禁用的属性会禁用并启用   按钮。属性的值无关紧要，这就是为什么您   无法通过写入<button disabled="false">Still Disabled</button>来启用按钮。

设置按钮的disabled 属性（例如，使用Angular绑定）   禁用或启用按钮。属性的值很重要。

即使HTML属性和DOM属性也不一样   当它们具有相同的名称时。

Answer 2

不是使用禁用的用法，[attr.disabled]

<button *ngIf="type!='invoices' && this.action==='edit'" [attr.disabled]=" buttonDisabled == true" (click)="genera(fields.termini)" class="ml-16 mat-raised-button mat-accent" mat-raised-button="" disabled color="primary">Genera fattura</button>

如果选中了循环中的复选框，则启用按钮Angular 5

2 个答案: