typescript - problem i kod "$event.target.checked" i angular 11

Använder detta exempel i min kod: https://stackblitz.com/edit/angular-rskaug?file=src%2Fapp%2Fapp.component.html

Html i komponent

<td><input type="checkbox" (change)="onChange(employee.id, $event.target.checked)"></td>

Typescript i komponent

onChange(id: any, isChecked: boolean) {
    const idFormArray = <FormArray>this.myForm.controls.employeeRelatedId;

    if (isChecked) {
      idFormArray.push(new FormControl(id));
    } else {
      let index = idFormArray.controls.findIndex(x => x.value == id)
      idFormArray.removeAt(index);
    }
  }

Felfunktion

Egenskapen 'checked' finns inte på typen 'EventTarget'.

45 <input type="checkbox" (change)="onChange(employee.id, $event.target.checked)">

Svar #1

Eftersom du redan har ett reaktivt formulär i mallen är jag inte säker på varför denna input inte också är en del av det. Då skulle du kunna använda något som formulärgruppens valueChanges-observation för att lyssna på dess händelser.

Med det sagt finns det flera snabba lösningar du kan prova.

Alternativ 1: mallreferensvariabel

Du kan använda en templatreferensvariabel i <input>-elementet och fånga dess checked-egenskap i argumentet till händelsehanteraren.

<input type="checkbox" #inputBox (change)="onChange(employee?.id, inputBox?.checked)">

Här är #inputBox mallreferensvariabeln.

Alternativ 2: inaktivera typkontroll

Du kan inaktivera typkontroll med $any()-funktionen i mallen.

<input type="checkbox" (change)="onChange(employee?.id, $any($event.target)?.checked)">

Den säkra navigeringsoperatorn ?. används för att undvika potentiella möjligen odefinierade fel.

Uppdatering: fungerande exempel

Arbetande exempel: Stackblitz

Svar #2

$event.target är av den generiska typen EventTarget. TypeScript är inte tillräckligt smart för att känna igen att händelsen skulle utlösas av input-fältet och att den faktiska typen skulle vara HTMLInputElement. Du kan göra en sådan ändring för att övervinna detta:

<td><input type="checkbox" (change)="onChange(employee.id, $event.target)"></td>

onChange(id: any, target: EventTarget | null) {
    const input = target as HTMLInputElement;
    const idFormArray = <FormArray>this.myForm.controls.employeeRelatedId;

    if (input.checked) {
      idFormArray.push(new FormControl(id));
    } else {
      let index = idFormArray.controls.findIndex(x => x.value == id)
      idFormArray.removeAt(index);
    }
  }

Relaterade artiklar