如何解决通过表单传递的元素未由服务器接收,也未显示在正面。修补方法| 角度| Dropwizard?
即使我对问题没有完全的了解,我也会尝试解决几个问题。
为什么要放+
那里?它将以数字表示形式转换变量,这就是您想要的吗?该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)
// Java
patchItAdd(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 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,而不是完整的菜单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)
}
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 class="addnewitembutton" (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添加到后端的数组。显然,因此也没有数据显示在前端。我在做什么错,或者至少我应该如何使用Angular
7在前端使用PATCH方法?
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。