角错误错误TS2532：对象可能为“未定义”

编程问答 2022-08-23

问题描述

我一直无法找到为什么我在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
  ) {}
}

enter image description here

完整错误是：

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.

解决方法

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

编译器会给出错误，因为我认为它非常严格（我自己不是相当熟练的专家），但是您应该执行null检查以防止可能的null情况。

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

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

最后，所有有关代码的行为都与您期望的一样。

,

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

angularjavajavajhipsterspring