你在使用 Angular Ivy 吗?最有可能的是由于模板类型检查 https://angular.io/guide/aot-compiler#phase-3-template-type-checking在常春藤 AOT 中。
尽管如此,还是有多种选择
选项 1:将事件作为参数发送
<input type="text" (change) = "setNewUserName($event)"/>
export class UsersListComponent {
setNewUserName(event: Event): void {
console.log('setNewUserName', (event.target as HTMLTextAreaElement).value);
}
}
选项 2:使用模板引用变量
<input #userName type="text" (change) = "setNewUserName(userName.value)"/>
export class UsersListComponent {
setNewUserName (userName : string): void {
console.log('setNewUserName', userName)
}
}
选项 3:使用禁用类型检查$any() https://angular.io/guide/template-typecheck#disabling-type-checking-using-any
<input type="text" (change) = "setNewUserName($any($event.target).value)"/>
export class UsersListComponent {
setNewUserName (userName : string): void {
console.log('setNewUserName', userName)
}
}
选项 4:模板驱动或反应式形式
Use a 模板驱动 https://angular.io/guide/forms or reactive https://angular.io/guide/reactive-forms表单来获取输入值。在我看来,这将是最优雅的方法。
Update: add 禁用类型检查 https://angular.io/guide/template-typecheck#disabling-type-checking-using-any