angular 11 中代码“$event.target.checked”的问题

Question

在我的代码中使用这个例子：https://stackblitz.com/edit/angular-rskaug?file=src%2Fapp%2Fapp.component.html

Html 组件

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

组件中的打字稿

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

错误详情

属性 'checked' 在类型 'EventTarget' 上不存在。

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

Answer 1

$event.target 是泛型类型 EventTarget。 TypeScript 不够智能，无法识别事件将由输入触发且实际类型为 HTMLInputElement。你可以做这样的改变来克服它：

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

Answer 2

鉴于模板中已经有一个响应式表单，我不确定为什么这个 input 不是它的一部分。然后你可以使用类似表单组的 valueChanges observable 来监听它的事件。

话虽如此，您可以尝试多种快速修复方法。

选项 1：模板引用变量

您可以在 <input> 元素中使用 template reference variable 并在事件处理程序的参数中捕获它的 checked 属性。

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

这里的#inputBox是模板引用变量

选项 2：禁用类型检查

您可以使用模板中的 $any() 函数禁用类型检查。

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

安全导航运算符 ?. 用于避免潜在的 possibly undefined 错误。

更新：工作示例

工作示例：Stackblitz

angular 11 中代码“$event.target.checked”的问题

issue in code "$event.target.checked" in angular 11

angular

typescript

angular11