Angular 5 Model转对象用于Post请求报错：无法设置undefined的barcode属性

这个错误的核心原因很明确：你试图给一个未初始化的item对象设置barcode属性，或者你的表单绑定没有指向正确的对象属性。咱们一步步来修复：

1. 先修正组件里的Item对象初始化 #

你说已经创建了Item类型的对象，但大概率只是声明了类型，没有实际实例化它。比如你可能写了：

// ❌ 错误：只声明类型，item实际上是undefined
item: Item;

这会导致item是undefined，当ngModel尝试设置item.barcode时自然会报错。

你需要主动初始化这个对象：

// ✅ 正确：初始化Item对象（如果是接口）
interface Item {
  barcode: string;
  // 这里添加你的其他Item属性
}

@Component({
  selector: 'your-component',
  templateUrl: './your-component.html'
})
export class YourComponent {
  // 初始化带默认值的Item对象
  item: Item = { barcode: '' };

  // 如果Item是一个类，这样初始化：
  // item = new Item();
}

2. 修正表单的ngModel绑定 #

你的HTML里绑定的是单独的barcode变量，但你实际需要绑定到item.barcode，这样输入的值才会存入你的Item对象中：

<form class="item-form" (ngSubmit)="sendPostRequest()">
  <mat-form-field>
    <!-- ✅ 绑定到item.barcode，而不是单独的barcode -->
    <input matInput name="barcode" placeholder="Barcode" [(ngModel)]="item.barcode">
  </mat-form-field>
  <!-- 现在可以正确显示item的barcode值 -->
  {{ item.barcode }} <br>
  
  <!-- 其他表单控件也同理绑定到item的对应属性 -->
  
  <button type="submit">提交</button>
</form>

3. 发送Post请求的示例 #

现在你可以在组件的提交方法里，直接使用初始化好的item对象发送请求：

import { HttpClient } from '@angular/common/http';

// 在组件构造函数注入HttpClient
constructor(private http: HttpClient) {}

sendPostRequest() {
  // 这里替换成你的API地址
  this.http.post('/api/items', this.item)
    .subscribe(response => {
      console.log('请求成功', response);
    }, error => {
      console.error('请求失败', error);
    });
}

额外注意事项 #

• 确保你的Angular模块已经导入了FormsModule（因为使用了ngModel），否则表单绑定会失效：

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // 其他模块
    FormsModule
  ]
})
export class YourModule {}

• 如果Item是一个类，确保类的构造函数正确初始化了所有必要属性，避免出现undefined的子属性。

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