获取对象可能为“空”。在 Angular 模板文件中答案

【问题标题】：Getting Object is possibly 'null'. in Angular template file获取对象可能为“空”。在 Angular 模板文件中
【发布时间】：2019-05-25 08:27:57
【问题描述】：

在我的 Angular 应用程序中，我收到以下错误：

对象可能是“空”。

问题是我得到这个错误不是因为一些打字稿代码，而是因为这个 html 模板：

  <form [formGroup]="form">
    <timepicker [formControlName]="'myControl'"></timepicker>
  </form>

  <br>
  <button class="btn btn-succes" (click)="form.get('myControl').enable()">Enable Control</button>
  <button class="btn btn-warning" (click)="form.get('myControl').disable()">Disable Control</button>
  <br><br>

  <pre class="alert alert-info">Time is: {{ form.get('myControl').value }}</pre>

【问题讨论】：

标签： angular typescript angular-template

【解决方案1】：

当标志--strictNullChecks被启用时会出现这个错误，为了解决这个问题，需要在访问它的属性之前检查一个对象是否不为空。

例如，在这种情况下：

<button (click)="form.get('myControl').enable()"></button>

在调用get(...)之前，我们首先需要检查form对象不为空：

<button *ngIf="form" (click)="form.get('myControl').enable()"></button>

或者，可以将更多的html元素包装在一个<ng-container>中以避免重复ngIfs：

<ng-container *ngIf="form">
  <form [formGroup]="form">
    <timepicker [formControlName]="'myControl'"></timepicker>
  </form>

  <br>
  <button class="btn btn-succes" (click)="form.get('myControl').enable()">Enable Control</button>
  <button class="btn btn-warning" (click)="form.get('myControl').disable()">Disable Control</button>
  <br><br>

  <pre class="alert alert-info">Time is: {{ form.get('myControl').value }}</pre>
</ng-container>

【讨论】：

【解决方案2】：

FWIW，您还可以将表单控件访问封装在 getter 中，以及显式类型转换：

get myControl() {return this.form.get('myControl') as FormControl;}

这将避免错误，而且它会使模板 DRYer。

【讨论】：