我创建了一个模板驱动的表单来使用 angular 11 和 json-server 添加产品

问题描述

但是当我向这个表单添加新产品时，我收到了这个错误，我的验证没有问题，但是这个状态 500（内部服务器错误）它总是来自我的浏览器控制台。

我的错误是，

TypeError: Cannot read property 'id' of undefined
    at Function.createId (C:\Users\ACER\AppData\Roaming\npm\node_modules\json-server\lib\server\mixins.js:58:39)
    at Function.insert (C:\Users\ACER\AppData\Roaming\npm\node_modules\json-server\node_modules\lodash-id\src\index.js:47:49)
    at C:\Users\ACER\AppData\Roaming\npm\node_modules\json-server\node_modules\lodash\lodash.js:4430:28
    at arrayReduce (C:\Users\ACER\AppData\Roaming\npm\node_modules\json-server\node_modules\lodash\lodash.js:697:21)
    at baseWrapperValue (C:\Users\ACER\AppData\Roaming\npm\node_modules\json-server\node_modules\lodash\lodash.js:4429:14)
    at LodashWrapper.wrapperValue (C:\Users\ACER\AppData\Roaming\npm\node_modules\json-server\node_modules\lodash\lodash.js:9114:14)
    at create (C:\Users\ACER\AppData\Roaming\npm\node_modules\json-server\lib\server\router\plural.js:239:48)
    at Layer.handle [as handle_request] (C:\Users\ACER\AppData\Roaming\npm\node_modules\json-server\node_modules\express\lib\router\layer.js:95:5)
    at next (C:\Users\ACER\AppData\Roaming\npm\node_modules\json-server\node_modules\express\lib\router\route.js:137:13)
    at next (C:\Users\ACER\AppData\Roaming\npm\node_modules\json-server\node_modules\express\lib\router\route.js:131:14)

我的服务文件是，

import { Injectable } from '@angular/core';
import {HttpClient,HttpHeaders} from "@angular/common/http";


@Injectable({
  providedIn: 'root'
})
export class ProductService {

  constructor( private httpClient :HttpClient) { }

  getProducts(){
    return this.httpClient.get('http://localhost:3000/products');
  }

  addProduct(data:any){
    // const httpHeader =new HttpHeaders();
    // httpHeader.append('content-type','application/json')
    return this.httpClient.post('http://localhost:3000/products',data);
  }


}

我的 component.ts 文件是，

import { Component,OnInit } from '@angular/core';
import {ProductService} from "../../product.service";
import {NgForm} from "@angular/forms";

@Component({
  selector: 'app-addproduct',templateUrl: './addproduct.component.html',styleUrls: ['./addproduct.component.css']
})
export class AddproductComponent implements OnInit {

  constructor(private productService :ProductService) { }

 msg =false;

  ngOnInit(): void {
  }

  addNew(addproduct:NgForm){
    const product ={
      productID :addproduct.value.pid,productName:addproduct.value.pname,price :addproduct.value.price

    }
    this.productService.addProduct(product).subscribe(result=>{
      this.msg =true;
    },error => {
      console.log(error)
    })
  }

}

我的 component.html 文件是，

<div class="container mt-4">

<div class="row">

  <div class="col-md-2">


  </div>


  <div class="col-md-8">


    <!--  Template Driven Form-->

    <form #addproduct="ngForm" class="form-group" (ngSubmit)="addNew(addproduct)" >

      <div class="alert alert-success" *ngIf="msg">
        Product Added Successfully
      </div>

      <br><br>
      <div class="form-group">
        <label for="exampleInputId">ProductID :</label>
        <input type="number" class="form-control" id="exampleInputId" name="pid" placeholder=" product Id" required  #name1='ngModel' ngModel>

        <div class="alert alert-danger" *ngIf="!name1.valid">
          <span *ngIf="name1?.errors?.required"> This name is required</span>
        </div>

      </div>

      <div class="form-group">
        <label for="exampleInputPName">Product Name :</label>
        <input type="text" class="form-control" id="exampleInputPName" name="pname"  placeholder="  product name" required #name2='ngModel'  minlength="3" ngModel>

        <div class="alert alert-danger" *ngIf="!name2.valid">
          <span *ngIf="name2?.errors?.required"> This name is required</span>
          <span *ngIf="name2?.errors?.minlength">You must enter atleast 3 characters</span>
        </div>

      </div>

      <div class="form-group">
        <label for="exampleInputPrice"> Price :</label>
        <input type="text" class="form-control" id="exampleInputPrice" name="price"   placeholder=" price of this product" required #name3='ngModel'  minlength="3" ngModel>

        <div class="alert alert-danger" *ngIf="!name3.valid">
          <span *ngIf="name3?.errors?.required"> This name is required</span>
          <span *ngIf="name3?.errors?.minlength">You must enter atleast 3 characters</span>
        </div>

      </div>
      <button type="submit" class="btn btn-success" [disabled]="!addproduct.valid" >Add Product</button>
    </form>



  </div>

  <div class="col-md-2">

  </div>



</div>


</div>

我的 db.json 文件是根据 json-server，

{
  "products":[
    {"productID":1,"productName": "pen","price" : 40},{"productID":2,"productName": "pencil","price" : 20},{"productID":3,"productName": "bottle","price" : 150}
  ]

}

请帮我解决这个错误，

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）