Angular中在模型类内实例化关联模型类遇undefined错误如何解决？

你碰到的这个TypeError: undefined is not an object (evaluating 'this.child.permission.walking = true')问题其实很好定位：你在尝试访问child.permission的子属性时，permission本身还没有被初始化，是个undefined。咱们来一步步解决它：

1. 在Child模型的构造函数里自动初始化Permission #

这是最省心的方案，确保每次创建Child实例时，permission都会自动变成ChildPermission的有效实例：

// child.model.ts
import { ChildPermission } from './child-permission.model';

export class Child {
  id?: number;
  name?: string;
  // 这里不要加可选符?，强制permission始终存在
  permission: ChildPermission;

  constructor() {
    // 构造函数里直接初始化Permission实例
    this.permission = new ChildPermission();
  }
}

这样当你执行new Child()之后，child.permission就已经是一个可用的实例了，直接设置walking属性完全不会报错。

2. 处理后端返回的空/缺失Permission字段 #

如果你的Child实例是从后端接口获取的，很可能后端返回的permission字段是null或者干脆没返回，这时候需要在接收数据时手动补全：

// child.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';
import { Child } from './child.model';
import { ChildPermission } from './child-permission.model';

@Injectable({ providedIn: 'root' })
export class ChildService {
  constructor(private http: HttpClient) {}

  getChild(childId: number) {
    return this.http.get<Child>(`/api/children/${childId}`).pipe(
      map(rawChild => {
        // 后端没返回permission或者返回null时，初始化一个新实例
        rawChild.permission = rawChild.permission ?? new ChildPermission();
        return rawChild;
      })
    );
  }
}

3. 在组件里手动初始化Permission #

如果只是临时创建Child实例，也可以在组件里直接手动赋值：

// child.component.ts
import { Component } from '@angular/core';
import { Child } from './child.model';
import { ChildPermission } from './child-permission.model';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html'
})
export class ChildComponent {
  child: Child;

  constructor() {
    this.child = new Child();
    // 手动给permission赋值
    this.child.permission = new ChildPermission();
    // 现在设置walking就不会报错了
    this.child.permission.walking = true;
  }
}

额外提示：如果ChildPermission有带参构造函数 #

如果你的ChildPermission类需要初始化参数，比如：

// child-permission.model.ts
export class ChildPermission {
  walking: boolean;
  running: boolean;

  // 带默认值的构造函数
  constructor(walking = false, running = false) {
    this.walking = walking;
    this.running = running;
  }
}

那初始化的时候可以直接传参：this.permission = new ChildPermission(true, false);，这样能更灵活地设置初始值。

内容的提问来源于stack exchange，提问作者Maihan Nijat