javascript - Angular endre tilstanden til en avkrysningsboks etter at brukeren klikker

Jeg har følgende kode som skal sette den merkede verdien til falsk ved klikk:

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

  checked = false;

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

}

Problemet er at hvis vi klikker på inntastingsfeltet og venter et sekund, vil det forbli merket. Hvorfor skjer dette? Hvorfor endrer ikke Angular det tilbake til false igjen?

Svar #1

Kort fortalt er Angular-avkrysningsbokser bare ødelagte: Problem

Hvis du derimot ønsker å oppnå denne effekten, vil jeg anbefale deg å lage din egen tilpassede komponent som vil fungere på samme måte som en avkrysningsboks.

Her er ett til morsomt eksempel på Checkbox-moro, prøv å samhandle med både «With track by» og «No track by» blokkene og se hva som skjer.

Svar #2

Jeg tror du kan gjøre det enkelt ved å bruke [(ngModel)]="checked". Koden din fungerer i stackblitz-lenken. Vennligst sjekk det. Her er koden min gitt nedenfor.

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)
  }
}

Relaterte artikler