通过表单传递的元素不会被服务器接收,也不会显示在前面.修补方法|角度| Dropwizard [英] Elements passed through a form not received by the server nor displayed on the front. PATCH method | Angular | Dropwizard
问题描述
服务器端显示调用了PATCH方法,并在数组末尾添加了一个null,而不是使用名称和价格来自用户输入的新Item数组.
Server side shows that the PATCH method is called and adds a null at the end of the array, instead of a new Item array with the Name and Price taken from user input.
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 function which implements the patchAdd method and takes data from html: Note that there are a couple of comments, from my unsuccessful tries.
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 class="addnewitembutton" (click) = "patchItAdd(itemName.value, itemPrice.value)">Add</button></span>
</label><br>
后端(Dropwizard)中的
PATCH方法:
PATCH method in the backend (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添加到后端的数组.显然,因此也没有数据显示在前端.我在做什么错,或者至少应该如何使用Angular 7在前端使用PATCH方法?
Only a null is added to the array on the backend after clicking the "ADD" button and calling the patchItAdd function. Obviously, no data is displayed on the front-end neither because of that. What am I doing wrong, or at least how should I approach the PATCH method on the front-end, with Angular 7?
推荐答案
即使我对问题没有完全的了解,我也会尝试解决两点.
I'll try to address a couple of points, even if I don't have a complete understanding of the problem.
为什么要在其中放置+
?它将以数字表示形式转换变量,这就是您想要的吗? get()
调用返回值是string | null
Why are putting a +
there? It will transform the variable in its numeric representation, is that what you want? The get()
call return value is string | null
const id = +this.route.snapshot.paramMap.get('id');
这里您要使用this.item
调用menuService.patchAdd
,但是我想您想使用输入值name
和price
创建一个新的Item
实例.
Here you're calling menuService.patchAdd
with this.item
, but I suppose you want to create a new Item
instance using the input values name
and price
.
// Angular
(click) = patchItAdd(itemName.value, itemPrice.value)
// Java
patchItAdd(name: string, price: number){
...
this.menuService.patchAdd(id, this.item)
我的假设正确吗?
我看到的另一个问题是您正在将id
传递给patchAdd
string
(或您的情况下的number
,因为您使用+
进行了转换)
Another issue I see is that you're passing the id
, which should be string
(or number
in your case, since you transform it with the +
) to patchAdd
const id = +this.route.snapshot.paramMap.get('id');
this.menuService.patchAdd(id, this.item)
patchAdd
函数需要一个MenuModel
,它是一个复杂的对象.
怎么样?您确定这就是您想要的吗?
The patchAdd
function expect a MenuModel
, which is a complex object.
How's that? Are you sure this is what you want?
让patchItAdd
接受menu.id
值
(click) = "patchItAdd(menu.id, itemName.value, itemPrice.value)"
现在更新方法
// Now this method accept the MenuModel#id property
patchItAdd(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,而不是完整的MenuModel
Update also the patchAdd
method to accept the menu ID, instead of the complete 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() { }
这篇关于通过表单传递的元素不会被服务器接收,也不会显示在前面.修补方法|角度| Dropwizard的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!