Laravel一对多API数据传入Angular输入框遇未定义错误的解决

问题背景 #

Laravel API已完成Employee与Salary模型的一对多关系配置，Postman调用API可正常插入数据，但Angular端的薪资输入框无法传递数据，控制台报错：ERROR TypeError: ctx.salary is undefined。

Laravel模型代码 #

Employee.php

protected $fillable = ['birth_date','first_name','last_name','gender','hire_date'];

protected $primaryKey = 'emp_no';

public function salaries(): HasMany
{
    return $this->hasMany(Salary::class, 'emp_no','emp_no');
}

Salary.php

protected $fillable = ['salary','from_date','to_date'];

public function employee(): BelongsTo
{
    return $this->belongsTo(Employee::class, 'emp_no');
}

Angular Employee类代码 #

export class Employee {
    birth_date:any;
    first_name:any;
    last_name:any;
    gender:any;
    hire_date:any;
    salaries: any;
    titles:any;
    salary:any;
    title:any;
    emp_no: any;
}

解决方案 #

1. 初始化salary对象 #

报错核心原因是模板绑定的salary未初始化，Angular双向绑定要求绑定对象必须提前实例化。在组件类的构造函数或ngOnInit钩子中为salary赋值空对象：

import { Component, OnInit } from '@angular/core';
import { Employee } from './employee';

@Component({
  selector: 'app-employee',
  templateUrl: './employee.component.html',
  styleUrls: ['./employee.component.css']
})
export class EmployeeComponent implements OnInit {
  employee: Employee = new Employee();

  constructor() {
    // 初始化salary对象，避免undefined
    this.employee.salary = {};
  }

  ngOnInit(): void {
    // 也可在此处初始化
    // this.employee.salary = {};
  }

  // 表单提交方法示例
  onSubmit() {
    const requestData = {
      ...this.employee,
      salary: this.employee.salary
    };
    // 调用API发送数据
    // this.apiService.createEmployee(requestData).subscribe(...);
  }
}

2. 修正模板绑定路径 #

确保模板输入框的绑定路径与组件中初始化的对象层级一致：

<input type="text" name="salary" class="form-control" [(ngModel)]="employee.salary.salary">

3. 多薪资条目适配（一对多场景） #

如果需要同时添加多个薪资条目，需初始化salaries数组并通过*ngFor循环渲染输入框：

// 组件中初始化salaries数组
constructor() {
  this.employee.salaries = [{}]; // 初始化一个空薪资条目
}

模板循环渲染：

<div *ngFor="let salary of employee.salaries; let i = index">
  <input type="text" name="salary-{{i}}" class="form-control" [(ngModel)]="employee.salaries[i].salary">
  <!-- 其他薪资字段输入框 -->
</div>

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