javascript - Angular ändra tillstånd på en kryssruta efter att användaren klickar

Jag har följande kod som ska sätta värdet för markerad till falskt vid klick:

@Component({
  template: `
    <input type="checkbox" [checked]="checked" (change)="onChange()">
   `
})
export class AppComponent  {

  checked = false;

  onChange() {
    setTimeout(() => {
      this.checked = false;
    }, 1000)
  }

}

Problemet är att om vi klickar på inmatningen och väntar en sekund, kommer den att förbli markerad. Varför händer detta? Varför ändrar inte Angular det tillbaka till falskt?

Svar #1

Kort sagt är Angulars kryssrutor bara trasiga: Problem

Om du däremot vill uppnå denna effekt, rekommenderar jag att du skapar din egen anpassade komponent som kommer att fungera på samma sätt som en kryssruta.

Här är ett till roligt exempel på Checkbox-galenskap: prova att interagera med både "With track by" och "No track by" blocken och se vad som händer.

Svar #2

Jag tror att du kan göra det enkelt genom att använda [(ngModel)]="checked". Din kod fungerar i stackblitz-länken. Vänligen kolla det. Här är min kod som ges nedan.

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

@Component({
  selector: 'my-app',
  template: `
    <input type="checkbox" [checked]="checked" [(ngModel)]="checked" (change)="onChange()"  name="horns">
    <label for="horns">Horns</label>
   `,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
   checked = false;

  onChange() {
    setTimeout(() => {
      this.checked = false;
    }, 2000)
  }
}

Relaterade artiklar