Question

我有一个表，单击某个按钮时，如果后端的状态被批准，则需要禁用该按钮。我根据条件向按钮添加了disable属性，但条件不起作用。

如果我使用条件.receiptStatus=='APPROVED'，则它不起作用。

this.receipt = this.dataSource.data;
this.receipts = this.receipt.forEach(element => {
  this.receivableStatus = element.status
  console.log(this.receivableStatus);
});
// this.receivableStatus has the response from the backend.

.disable {
  cursor: not-allowed;
  pointer-events: none;
}

<button mat-raised-button mat-button-sm class="table-action-btn" color="orange" 
[disabled]="this.receiptStatus=='APPROVED'" 
[ngClass]="{'disable':this.receiptStatus=='APPROVED'}" (click)="openCreateReceipt(row)">
  <mat-icon class="size-16" color="white">edit</mat-icon>
</button>

Answer 1

您不应在HTML中使用this。

<button mat-raised-button mat-button-sm class="table-action-btn" color="orange" 
[disabled]="receiptStatus=='APPROVED'" 
[ngClass]="{receiptStatus=='APPROVED' ? 'disable' : ''}" (click)="openCreateReceipt(row)">
  <mat-icon class="size-16" color="white">edit</mat-icon>
</button>

希望这会有所帮助

Answer 2

我找到了解决方案，我用另一种方法完成了。因为iam使用可匹配的数据源在我使用的状态栏中显示了状态

 <button mat-raised-button mat-button-sm class="table-action-btn" 
color="orange"[disabled]="row.status=='APPROVED'"
[ngClass]="{'disable':row.status=='APPROVED'}"
(click)="openCreateReceipt(row)">
  <mat-icon class="size-16" color="white">edit</mat-icon>
</button>

它工作正常。

根据条件禁用按钮

2 个答案: