Angular中NgModel绑定对象时出现未定义属性读取错误

以下是几个针对性的解决方向：

• 初始化Box变量为符合接口的默认值
  即使关闭了strictPropertyInitialization，组件初始化阶段box变量仍为undefined，模板渲染时会直接报错。在组件类里给box赋一个空的符合Box接口的默认值：

  // 组件.ts文件
  box: Box = {
    boxName: '',
    // 补充Box接口中其他必填字段的默认值，比如id: 0, description: ''等
  };
  

• 在模板中使用安全导航操作符
  直接在NgModel绑定处添加?.，避免当box未定义时尝试读取boxName：

  <!-- 模板第65行修改为 -->
  <input [(ngModel)]="box?.boxName" />
  

• 用*ngIf控制模板渲染时机
  如果box是通过Observable异步赋值的，模板可能在数据返回前就完成渲染。用*ngIf判断box存在后再渲染绑定区域：

  <div *ngIf="box">
    <!-- 包含第65行的表单内容 -->
    <input [(ngModel)]="box.boxName" />
    <!-- 其他相关表单元素 -->
  </div>
  

• 检查editBox函数的赋值逻辑
  点击编辑按钮时，确保传入的box对象被正确赋值给组件的box变量，建议使用深拷贝避免引用问题：

  editBox(selectedBox: Box) {
    // 深拷贝传入的对象，确保组件的box变量有独立的实例
    this.box = JSON.parse(JSON.stringify(selectedBox));
    // 或者使用对象展开语法（若Box无嵌套对象）
    // this.box = {...selectedBox};
    console.log(this.box); // 此时打印的box应该能被模板正确读取
    // 后续打开编辑弹窗等逻辑
  }
  

内容的提问来源于stack exchange，提问作者William Treuel