Angular флажок жестко запрограммирован на [check] = "true" не всегда верно

Question

Я устраняю проблему с большей проблемой, но я свел ее к следующему ...

Если у меня есть флажок <input type="checkbox"> в Angular, и я жестко кодирую [checked] свойство true, не должно ли оно всегда отображаться как отмеченное?

Вот пример. Если вы установите флажок, он будет отключен, хотя свойство [checked] всегда true.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  template: '<input type="checkbox" (change)="onChange()" [checked]="isChecked()"> Click me and I\'ll uncheck (but I shouldn\'t)',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit  {

  ngOnInit() {
  }

  isChecked() {
    console.log('isChecked() was called');
    return true;
  }

  onChange() {
    console.log("changed.")
  }     
}

Один и тот же код в Stackbiltz:
https://stackblitz.com/edit/angular-checkbox-example-w8ujt7?file=app%2Fapp.component.ts

Спасибо, Даг

Answer 1

Передайте событие $ в функцию onChange <input type="checkbox" (change)="onChange($event)" [checked]="isChecked()"> Click me and I\'ll uncheck (but I shouldn\'t), чтобы вы могли изменить значение ввода.

onChange(e) {
  console.log("changed.")
  //here u are again setting the input value as true.
  e.target.checked = true;
}

Другой способ сделать, добавить событие (щелчок) в свой такой шаблон (click)="onClick($event)"

и определение функции onClick (e) в вашем компоненте,

onClick(e){
   //here u are again setting the input value as true.
   e.target.checked = true;
}

Но (щелчок) событие лучше, чем (изменить) для этой ситуации.