对象可能为“空”

Question

我正在学习 Angular，我是新手，我不知道为什么，但我遇到了这个错误 Object is possibly 'null'，这是我的代码：

component.html

<input [value]="email" (keyup.enter)="email = $event.target.value; onKeyUp()"/>

组件.ts

 email: string = "me@example.com"

 onKeyUp(){
     console.log(this.email)
 }

我也尝试过使用它，但它会引发一个新错误tsconfig.json "strictNullChecks": false,

Answer 1

使用 [value] 绑定

您可以检查是否在 change 输入事件上使用具有正确配置的 [value] 绑定

<input type="text" (change)='email=$event.target.value' [value]="email">

这将更新控制器，而不需要控制器中的 onKeyUp 方法。

使用 [(ngModel)] 绑定

但可能最常见的实现方式是使用 ngModel 双向数据绑定。因此，您还将在 controller 和 view 上获得更好的 email 属性一致性。

<input type="text" [(ngModel)]="email">

为了能够在您的代码中使用它，您需要在您的 app.module.ts 上设置 FormsModule

import { NgModule } from '@angular/core';
// ...
import { FormsModule } from '@angular/forms'; // <---


@NgModule({
  imports: [
    BrowserModule,
    CommonModule,
    FormsModule // <---
  ],
  declarations: [
    AppComponent
  ],
  providers: [],
  bootstrap: [ AppComponent ]
})
export class AppModule { }