Флажок не проверял / снимал флажок, пока [проверено] обновление свойства

Question

Мне нужно сделать кнопку переключения.Мне нужно предотвратить поведение кнопки по умолчанию (т. Е. При нажатии / снятии флажка).Поэтому я применяю protectDefault к событию щелчка по флажку.Теперь я обновляю флажок [флажок] правильно.но ничего не происходит.

HTML

<input type="checkbox" [checked]="isChecked" (change)="toggleChange()">

TS

@HostListener('click', ['$event'])
  onClick($event) {
    this.callback.emit();
    $event.preventDefault();
  }

  @Input() isChecked;
  @Output() callback = new EventEmitter();
  constructor() { }

  ngOnInit() {
  }

  ngOnChanges(changes: SimpleChanges) {
    // check isChecked value
    console.log(changes);
  }

  toggleChange() {
    this.callback.emit();
  }

Пожалуйста, отметьте https://stackblitz.com/edit/angular-cyp9jz

Answer 1

export class AppComponent  {
  isChecked: boolean = false;
  name = 'Angular';

  toggleCallback() {
    this.isChecked = !this.isChecked;
  }
}

Используйте тип boolean и инициализируйте значение

export class ToggleButtonComponent implements OnInit, OnChanges {

  @Input() isChecked: boolean;
  @Output() callback = new EventEmitter();
  constructor() { }

  ngOnInit() {
  }

  ngOnChanges(changes: SimpleChanges) {
    // check isChecked value
    console.log(this.isChecked);
  }

  toggleChange() {
    this.callback.emit();
  }

}

Также удалите Hostlistener, он вам не нужен, потому что вы вызываете toggleChange () в случае изменения.

Answer 2

вместо значения обмена

используйте это

    <input type="checkbox" [checked]="isChecked" (change)="toggleChange($event)">

код

toggleChange(event): void {
      console.log(event.checked)
  }