如果 angular 7 中的条件匹配，则启用和禁用按钮并更改模态中的状态

Question

我有一个弹出 window 有 5 个按钮。 在状态的基础上，我必须在弹出窗口（模态）中启用和禁用按钮。5 状态是：匹配、未匹配、确认、未确认、已分发，5 个按钮是匹配、未匹配、确认、未确认、已分发。 如果在弹出窗口 window 中状态为 ACK，则除 UNACK 按钮外的所有 4 个按钮都应禁用，如果用户单击 UNACK 按钮，则 ACK 按钮应变为启用，并且在弹出 window 不关闭它的情况下，状态应更改为 UNACK，并且 UNACK 按钮变为禁用，如果状态为DISPATCHED 则只有 MATCH 和 UNMATCH 按钮启用并且 rest 3 被禁用，单击 MATCH 按钮状态应从弹出 window 中的 DISPATCHED 更改为 ACK以及如何更改状态（ACK 到 UNACK）点击 UNACK 按钮弹出 window

<button mat-raised-button color="primary" (click)="onMatch()" [disable]="isDisable" >MATCH</button>
<button mat-raised-button color="primary" (click)="onUnMatch()"[disable]="isDisable">UNMATCH</button>
<button mat-raised-button color="primary" (click)="onAck()" [disable]="isDisable">ACK</button>
<button mat-raised-button color="primary" (click)="onUnack()"[disable]="isDisable">UNACK</button>
<button mat-raised-button color="primary" (click)="onDispatched()"[disable]="isDisable">DISPATCHED</button>


ts file where i m writing condition for status
isDisable(){
   if(matchStatus === MATCH){
      return true
  } else (matchStatus === MATCH || ACK || UNACK || DISPATCHED) {
      return false
  }
}

我不确定如何通过单击弹出窗口（模态）中的按钮改变状态来实现此启用和禁用功能，谢谢。

Answer 1

我创建了简单的 stackblitz https://stackblitz.com/edit/angular-button-status

这个想法是在状态和每个按钮状态之间创建一个映射。

buttons = {
  button0_disabled: () => { return this.status !== 'status0' },
  button1_disabled: () => { return this.status !== 'status1' },
  button2_disabled: () => { return this.status !== 'status2' },
};

所以每次状态的改变都会触发按钮状态的改变。

我希望它有所帮助。