如何使用禁用属性？Angular 10 禁用属性不起作用答案

【问题标题】：How to use disabled property ?Angular 10 disabled property not working如何使用禁用属性？Angular 10 禁用属性不起作用
【发布时间】：2021-08-28 09:47:47
【问题描述】：

---更新---

我早些时候发布了这个问题，但没有得到解决方案。在一个 github 博客中，我发现单独的“isButtonDisabled”不起作用，需要调用一个函数。在我的代码中，我只能在验证 ts 中的某些条件后带一个布尔值。怎么了？

github link

我已经尝试过 [禁用] 或禁用。根据我在打字稿中的情况，它不能正常工作。我有 4 个按钮，我需要根据我的打字稿条件来实现它。我有 7 个需要评估的条件。到目前为止，无论条件如何，该按钮都会被禁用。请提出任何其他方法来实现它

HTML

<button type="button" [disabled]="isButtonDisabled"
              style="background: #79CEA4 !important;color: #FFFFFF !important;font-size: 13px;font-weight: 600;margin-right: 20px"
              class="btn  btn-lg" (click)="finish()">FINISH</button>

isButtonDisabled:boolean;
for (var EmployeeList of Employee){
        if ((EmployeeList.EmployeeStatus== 'Active')  {
          this.isButtonDisabled= false;
          return 'circle3';  
        }
        else if((EmployeeList.EmployeeStatus== 'Inactive') {
           this.isButtonDisabled= true;
           return 'circle1';

}

【问题讨论】：

那个按钮在 ngFor 中吗？如果是这样，那么您只为所有这些变量使用了一个变量。我假设它是一个 ngfor，因为你也在循环你的 ts。

标签： angular typescript

【解决方案1】：

问题在于普通的 html <button> 将 disabled="anything" 解释为 disabled。

因此，在 Angular 中，您可以使用以下方法实现拥有属性与不拥有属性：

<button [attr.disabled]="isButtonDisabled ? true: null"...

【讨论】：