Angular创建预约功能报错：Cannot read properties of undefined (reading 'id')

错误根源 #

模板中直接绑定了rendezvous.user.id，但组件内的rendezvous对象未初始化user属性，导致Angular渲染模板时rendezvous.user为undefined，无法读取id属性，进而触发该报错。

解决方案 #

方案1：在组件内初始化完整的rendezvous对象

在CreateRendezvousComponent中，初始化rendezvous时同时创建空的user对象，确保模板渲染时user属性存在：

export class CreateRendezvousComponent implements OnInit {
  // 初始化rendezvous，包含空的user对象
  rendezvous: Rendezvous = {
    etat: '',
    user: { id: 0 } // 初始化user的id为默认值
    // 其他Rendezvous模型需要的属性也按需初始化
  };

  constructor(private rendezvousService: RendezvousService) {}

  ngOnInit(): void {
    // 其他初始化逻辑
  }

  // 你的saveRendezVous方法...
}

方案2：在模板中使用安全导航操作符（可选）

如果不想提前初始化user对象，可以在模板中用?.安全导航操作符避免空指针，但这种方式仅适合单向绑定场景，双向绑定([(ngModel)])可能因为user不存在而无法正常赋值，所以优先推荐方案1：

<input type="number" class="form-control" id="user.id"
[(ngModel)]= "rendezvous.user?.id" name="user.id">

额外建议 #

如果你的User模型是从后端获取的可选用户列表，建议改用下拉选择框（<select>）来绑定用户ID，避免手动输入的错误，同时确保user对象始终有效：

<div class="form-group">
  <label>user id</label>
  <select class="form-control" [(ngModel)]="rendezvous.user.id" name="user.id">
    <option *ngFor="let user of users" [value]="user.id">{{user.id}}</option>
  </select>
</div>

内容的提问来源于stack exchange，提问作者Jalel MED