禁用的属性在按钮的角度不起作用

Question

我已经尝试过 [禁用] 或禁用。它不能根据我在 typescript 中的条件工作。我有大约 4 个按钮，我需要根据我的 typescript 条件来实现它。我的要求是禁用按钮基于打字稿条件。我有大约 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>
**TS**
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';

}

Answer 1

在你的 ts 文件中使用 Angular 的 ChangeDetectorRef。 它用于检测更改并反映到您的 DOM 对象或 HTML 中。

constructor(private ref: ChangeDetectorRef) { }

isButtonDisabled:boolean;

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

Answer 2

解决这个问题的一种方法，或者判断你的变量是否正在改变：

<button type="button" [ngClass]="{'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>

在你的 CSS 中：

.disabled {
    pointer-events: none;
    background-color: grey;
    opacity: 0.8;
}