Чтобы установить только один флажок за раз и выполнить определенную задачу для определенного выбранного флажка или для обоих флажков не отмечено - PullRequest
Новая
       6

Чтобы установить только один флажок за раз и выполнить определенную задачу для определенного выбранного флажка или для обоих флажков не отмечено

2 голосов
/ 11 апреля 2019

У меня есть два флажка, и цель состоит в том, чтобы позволить только один флажок быть выбранным за один раз Далее необходимо выполнить другую задачу в зависимости от того, выбран ли определенный флажок, или в случае, если оба флажка сняты. Я реализовал это и столкнулся с проблемой при выполнении задачи, когда один из флажков установлен или оба сняты 

<div *ngFor="let chk of checkboxes">
<input type="checkbox" [checked]="chk.checked" 
(click)="uncheckOther(chk)"> {{chk.value}}
</div>

Код TS: 

  checkboxes = [{ checked: false, value: 'Request' }, { checked: false, 
  value: 'Reservation' }];    

  uncheckOther(chk) {
   //uncheck all
   this.checkboxes.forEach(x => {
   if(x.checked == true)
   x.checked = false;
  })

  //check the selected
   if(chk.checked == true) {
   chk.checked = false; 
    } else {
   chk.checked = true;
   }
//Execute task if any one of the checkboxes are selected
   if(chk.value === "Request" && chk.checked == true){
    console.log("call request data")
   } else if(chk.value === "Reservation" && chk.checked == true){
    console.log("call Reservation data");
   }
//Execute task if none of them is checked
   this.checkboxes.forEach(x => {
   if(x.checked === false)
   console.log("call both combined data")
   })
   }

Одновременно должен быть установлен только один флажок, и некоторые задачи должны выполняться в зависимости от установленного флажка или от того, что оба флажка сняты, что также является случаем по умолчанию (или может быть отключен пользователем)

1 Ответ

1 голос
/ 11 апреля 2019

Нужно немного изменений:

HTML код: 

<div *ngFor="let chk of checkboxes">
  <input type="checkbox" [(ngModel)]="chk.checked" (ngModelChange)="uncheckOther(chk,$event)"> 
  {{chk.value}}
</div>

Код TS: 

uncheckOther(chk, event) {

  if (event) {
    //uncheck all
    this.checkboxes.forEach(x => {
      if (x.checked == true)
        x.checked = false;
    })
    //check the selected
    if (chk.checked == true) {
      chk.checked = false;
    } else {
      chk.checked = true;
    }
    if (chk.value == "Request") {
      console.log('Call Request API')
    }
    else if (chk.value == "Reservation") {
      console.log('Call Reservation API')
    }
  }
  else {
    console.log('Call Both API')
  }
}

Working Demo

...