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

【问题标题】：Angular error TS2531: Object is possibly 'null'角度错误 TS2531：对象可能为“空”
【发布时间】：2021-07-11 09:13:03
【问题描述】：

所以我有一个 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)"/>
                                                              ~~~~~

【问题讨论】：

你为什么不使用([ngModel]) 如果这是反应形式那么你可以在AfterViewInit this.reactiveForm.valueChanges.subscribe(x => { console.log('form value changed') console.log(x) }) 下检查你可以使用它。
恐怕我不太明白你指的是什么。这实际上是我的第一个 Angular 应用程序，所以我是新手。
使用“安全”运算符?:setNewUserName($event.target?.value)。顺便说一句，您可以使用 [(ngModel)] 来绑定两个方向-或 [ngModel] (ngModelChange)-
我尝试了安全运算符，我也尝试使用 this.value 但它们都返回错误

标签： html angularjs angular typescript

【解决方案1】：

你在使用 Angular Ivy 吗？很可能是因为 Ivy AOT 中的 template type checking。

尽管如此，有多种选择

选项 1：将事件作为参数发送

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

export class UsersListComponent {
   setNewUserName (event: any): void {
       console.log('setNewUserName', event.target.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：模板驱动或反应式表单

使用template-driven 或reactive 表单获取输入值。 IMO 这将是最优雅的方法。

更新：添加disable type checking

【讨论】：

第二种解决方案确实有效。为什么 $ 命令不起作用？请问我该如何解决这个问题？
第一个解决方案（“发送事件”）不起作用吗？
错误可能是因为使用 Ivy，渲染引擎需要事先访问属性，在这种情况下，由于事件的性质，这是不可能的。
但是对于第一个解决方案，这不是问题，因为属性 value 仅在运行时在触发 change 事件时进行评估。
不，它确实有效。有我拼写错误。非常感谢

【解决方案2】：

试试这个

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

会有用的

【讨论】：

【解决方案3】：

这对我有用

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

在 angylar 13 中

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

选项 1：将事件作为参数发送

选项 2：使用模板引用变量

选项 3：使用 $any() 禁用类型检查

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

选项 3：使用 `$any()` 禁用类型检查