角度错误 TS2531：对象可能为“空”

Question

所以我有一个 Component.html，其中包含如下输入：

<input type="text" (change) = "setNewUserName($event.target.value)"/>

component.ts 是：

import { Component } from "@angular/core";
@Component({
    selector : 'app-users-list',
    templateUrl : './usersList.component.html'
})
export class UsersListComponent 
{
   setNewUserName (userName : string): void {
       console.log('setNewUserName', userName)
   }
}

最后的 module.ts 是：

@NgModule ({
    declarations: [UsersListComponent],
    imports : [CommonModule],
    exports: [UsersListComponent]
})
export class UsersListModule {}

运行服务器时，弹出如下错误：

error TS2531: Object is possibly 'null'.

1 <input type="text" (change) = "setNewUserName($event.target.value)"/>
                                                              ~~~~~

Answer 1

你在使用 Angular Ivy 吗？最有可能的是由于 Ivy 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()

禁用类型检查

<input type="text" (change) = "setNewUserName($any($event.target).value)"/>

export class UsersListComponent {
   setNewUserName (userName : string): void {
       console.log('setNewUserName', userName)
   }
}

选项 4：模板驱动或反应式形式

使用模板驱动或反应式形式获取输入值。在我看来，这将是最优雅的方法。

更新：添加禁用类型检查

Answer 2

试试这个

setNewUserName($any($event.target).value);

会起作用的

Answer 3

这对我有用

($any($event.target).value);

在安吉拉尔 13

Answer 4

就我而言，选项#3 对我有用。下面是错误和解决方案的代码

错误

<input pInputText  type="text" (input)="tabMenu.filterGlobal($event.target.value, 'contains')"
           placeholder="Búsqueda Global" [formControl]="txtBusqueda"/>

解决方案

<input pInputText  type="text" (input)="tabMenu.filterGlobal($any($event.target).value, 'contains')"
           placeholder="Búsqueda Global" [formControl]="txtBusqueda"/>