角度错误错误 TS2532：对象可能是“未定义”答案

【问题标题】：Angular Error error TS2532: Object is possibly 'undefined'角度错误错误 TS2532：对象可能是“未定义”
【发布时间】：2020-12-01 14:18:13
【问题描述】：

我一直无法找到我在 Angular 项目中收到此错误的原因。

计划包含任务数组。每个任务都包含一个名为 MetaTime 的实体。 MetaTime 有一个字段 TaskStart。

plan.usergen.model.ts

import { Moment } from 'moment';
import {ITaskUsergen} from "app/shared/model/task.usergen.model";

export interface IPlan {
  id?: number;
  name?: string;
  startDate?: Moment;
  tasks?: ITaskUsergen[];
}

export class Plan implements IPlan {
  constructor(
    public id?: number,
    public name?: string,
    public startDate?: Moment,
    public tasks?: ITaskUsergen[],
  ) {}
}

task.usergen.model.ts

import {ITask, Task} from "app/shared/model/task.model";
import {MetaTime} from "app/shared/model/meta-time.model";

export interface ITaskUsergen extends ITask {
  metaTime?: MetaTime;
}

export class TaskUserGen extends Task implements ITaskUsergen {
  constructor(public metaTime?: MetaTime) {
    super();
  }
}

meta-time.model.ts

import { Moment } from 'moment';

export interface IMetaTime {
  id?: number;
  taskStart?: Moment;
  taskDuration?: number;
  taskInterval?: number;
  taskRepeat?: number;
}

export class MetaTime implements IMetaTime {
  constructor(
    public id?: number,
    public taskStart?: Moment,
    public taskDuration?: number,
    public taskInterval?: number,
    public taskRepeat?: number
  ) {}
}

完整的错误是：

ERROR in src/main/webapp/app/entities/plan-usergen/plan-detail.component.html:47:46 - error TS2532: Object is possibly 'undefined'.
47   <td>{{ task.metaTime.taskStart }}</td>
                                            ~~~~~~~~
src/main/webapp/app/entities/plan-usergen/plan-detail.component.ts:7:16
7   templateUrl: './plan-detail.component.html',
                 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component PlanDetailComponent.

【问题讨论】：

这是“严格的空检查”，要关闭它，请尝试在 tsconfig.js 文件“strictNullChecks”的“compilerOptions”下添加此选项：true
设置为真或假关闭？
您不应禁用此功能，而应正确处理可为空的对象。由于这个错误，您可以提前发现错误。

标签： java angular spring jhipster

【解决方案1】：

这可能是因为您正在编译 AOT（提前）并且 metaTime 可以为空（metaTime? 后面的问号）。

编译器给出了错误，因为我认为它非常严格（我自己不是一个角度专家）但你应该做一个空检查以防止可能的空情况。

您至少可以通过使用它来修复它，问题是这是否是您期望发生的行为：

<td>{{ task.metaTime?.taskStart }}</td>

归根结底，一切都是为了让代码的行为符合您的预期。

【讨论】：

【解决方案2】：

由于您已将导致taskStart 的整个变量链设为可选，从技术上讲，它们中的任何一个都可能是未定义的，这将导致无法访问taskStart 变量。您应该以 null 安全的方式访问它，或者重新考虑变量需要是可选的。

【讨论】：

谢谢。你有一个空安全访问的例子吗？你的意思是在组件中？
所以一个原始的解决方案是有一个函数来接受任务并在检查前一个变量是否未定义后尝试访问开始时间。例如：getTaskStart(task) { if (task && task.metaTime) { return task.metaTime.taskStart; } }