Включить и отключить кнопку и изменить статус в модальном режиме, если условие соответствует angular 7

Question

У меня есть всплывающее окно с 5 кнопками. На основе статуса я должен включить и отключить кнопку во всплывающем окне (модальное) .5 Статус: MATCH, UNMATCH, ACK, UNACK, DISPATCHED и 5 кнопок - MATCH, UNMATCH, ACK, UNACK, DISPATCHED. Если во всплывающем окне отображается статус «ACK», то все 4 кнопки должны быть отключены, кроме кнопки «UNACK», а если пользователь нажимает кнопку «UNACK», кнопка «ACK» должна стать активной, а состояние во всплывающем окне должно измениться на «UNACK», не закрывая его, и Кнопка UNACK становится отключенной , таким же образом, если статус ОТПРАВЛЕН, тогда активна только кнопка MATCH & UNMATCH, а остальные 3 отключены, и при нажатии кнопки MATCH состояние должно измениться на ACK с DISPATCHED во всплывающем окне и как изменить статус (ACK на UNACK) во всплывающем окне при нажатии кнопки UNACK

<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

Я создал простой стек стека 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' },
};

Таким образом, каждое изменение статуса будет вызывать изменение состояния кнопок.

Надеюсь, это поможет.