При изменении состояния флажка остаются неизменными в пользовательском интерфейсе

Question

<input type="checkbox" [(ngModel)]="rowData.is_permitted" (change)="changeStatus()">

changeStatus() {
rowData.is_permitted = true;
}

Если я снимаю флажок, но условно хочу установить флажок, флаг обновляется, но не влияет на пользовательский интерфейс.

Answer 1

Вы должны изменить значение ngModel при нажатии. Может быть rowData.is_permitted значение по умолчанию true, поэтому при нажатии оно не изменяется вашей функцией. Ваша функция changeStatus будет

changeStatus() {
    rowData.is_permitted = !rowData.is_permitted;
}

Answer 2

Проблема показана в этот стек . После снятия флажка значение в коде устанавливается на true, но флажок остается непроверенным.

<Ч />

Вы можете сделать следующее, чтобы переопределить действие пользователя с изменением кода:

• Принудительно немедленно обнаружить изменение, позвонив по номеру ChangeDetectorRef.detectChanges
• Установите значение true
• Позвольте механизму обнаружения изменений обновить флажок, чтобы отразить обновленное значение

В приведенном ниже коде я обрабатываю событие ngModelChange. Упомянутое в вопросе условное поведение моделируется свойством keepChecked:

<input type="checkbox" 
  [(ngModel)]="rowData.is_permitted" 
  (ngModelChange)="changeStatus()">

changeStatus() {
  if (this.keepChecked) {
    this.changeDetectorRef.detectChanges();
    this.rowData.is_permitted = true;
  }
}

См. этот стек для демонстрации.

<Ч />

Аналогичный результат можно получить, установив значение асинхронно в обратном вызове setTimeout:

changeStatus() {
  if (this.keepChecked) {
    setTimeout(() => {
      this.rowData.is_permitted = true;
    });
  }
}

но я предпочитаю поддерживать код синхронным, вызывая ChangeDetectorRef.detectChanges.

Answer 3

Если я понимаю ваш вопрос, После изменения входа оно остается верным.

Итак, когда rowData.is_permitted истинно, вам нужно сделать его ложным.

rowData.is_permitted неверно, вам нужно сделать это.

Если это ваша проблема, попробуйте сделать это, изменив changeStatus function:

rowData.is_permitted = !rowData.is_permitted;

rowData.is_permitted получит противоположное значение.

Рабочий пример, который я разветвил от @SunilSingh: здесь