我已经尝试过 [禁用] 或禁用。它不符合我在打字稿中的条件。我有大约 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>
**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';
}
答案 0 :(得分:0)
在 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";
}
}
答案 1 :(得分:0)
解决此问题的一种方法,或者可以判断您的变量是否在变化:
<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;
}