即使我对问题没有完全的了解，我也会尝试解决几个问题。
为什么要放+那里？它将以数字表示形式转换变量，这就是您想要的吗？该get()调用的返回值是string | null
const id = +this.route.snapshot.paramMap.get(’id’);
在这里你打电话menuService.patchAdd跟this.item，但我想你想创建一个新的Item使用的输入值实例name和price。
// Angular(click) = patchItAdd(itemName.value, itemPrice.value)// JavapatchItAdd(name: string, price: number){ ... this.menuService.patchAdd(id, this.item)
我的假设正确吗？
我看到的另一个问题是您将传递了id，它应该string（或者number在您的情况下，因为您使用对其进行了转换+）patchAdd
const id = +this.route.snapshot.paramMap.get(’id’);this.menuService.patchAdd(id, this.item)
该patchAdd函数期望a MenuModel，这是一个复杂的对象。怎么样？您确定这是您想要的吗？
让我们patchItAdd接受menu.id价值
(click) = 'patchItAdd(menu.id, itemName.value, itemPrice.value)'
现在更新方法
// Now this method accept the MenuModel#id propertypatchItAdd(menuId: number, name: string, price: number){ if (!name) { return; } const trimmedname = name.trim(); // Construct a new ItemClass instance. // You need to take care by yourself of the 'person' property and the 'quantity' property const newItem = new ItemClass('', trimmedname, 0, price) this.menuService.patchAdd(menuId, newItem).subscribe(item => { this.items.push(item); });}
还更新patchAdd方法以接受菜单ID，而不是完整的菜单ID。MenuModel
// Now this method accepts the menu ID patchAdd(menuId: number, itemToAdd: ItemClass): Observable<any> { const url = `${this.menusUrl}/add/${menuId}` return this.http.patch(url, itemToAdd, httpOptions)}
在后端添加一个无参数的构造函数 Item
public Item() { }解决方法
服务器端显示调用了PATCH方法，并在数组末尾添加了一个null，而不是一个新的Item数组，其名称和价格取自用户输入。
服务组件中的PATCH方法：
patchAdd(menu: MenuModel | number,itemToAdd: ItemClass): Observable<any> { const id = typeof menu === ’number’ ? menu: menu.id;const url = `${this.menusUrl}/add/${id}`;return this.http.patch(url,itemToAdd,httpOptions).pipe ()}
patchItAdd函数，该函数实现patchAdd方法并从html中获取数据： 请注意，由于尝试不成功，有一些注释。
patchItAdd(name: string,price: number){name = name.trim();if (!name) {return;}const id = +this.route.snapshot.paramMap.get(’id’);this.menuService.patchAdd(id,this.item)//With this ^^,the value is null,but new element is added to the array. Cannot read property push of undefined. PATCH is triggered on the backend.// this.menuService.patchAdd(id,{name,price} as ItemClass) ----- Three errors,nothing happens.subscribe(item => { this.items.push(item);});}
应当收集用户输入并将数据传递给函数的HTML标签：
<label class='forma'> Name of the item: <input #itemName placeholder='What’s the name of the item?' onfocus='this.placeholder =’’' onblur='this.placeholder = ’What’s the name of the item?’'/><br><br> Item’s price: <input #itemPrice placeholder='What’s the price?'onfocus='this.placeholder =’’' onblur='this.placeholder = ’What’s the price?’'/><br><br> <span class='addnewbuttontext'><button (click) = 'patchItAdd(itemName.value,itemPrice.value)'>Add</button></span> </label><br>
后端的PATCH方法（Dropwizard）：
@PATCH @Path('/add/{menuId}') public void addMenuItem( @PathParam('menuId') final int menuId,final Item item) {final java.util.List<Item> items = this.menuRepository.get(menuId).getItems(); items.add(item); }
单击“ADD”按钮并调用patchItAdd函数后，仅将一个null添加到后端的数组。显然，因此也没有数据显示在前端。我在做什么错，或者至少我应该如何使用Angular7在前端使用PATCH方法？
