通过表单传递的元素未被服务器接收，也不显示在正面.补丁方法 |角度 |删除向导

Question

服务器端显示调用了 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 方法(删除向导)：

@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);
}

在单击"添加"按钮并调用patchItAdd函数后，只会在后端的数组中添加一个null。显然，前端上不会显示任何数据，也因此。我做错了什么，或者至少我应该如何使用 Angular 7 在前端处理 PATCH 方法？

Answer 1

我会尝试解决几点，即使我对这个问题没有完全的理解。

为什么要在那里放+？它将以数字表示形式转换变量，这是您想要的吗？get()调用返回值为string | null

const id = +this.route.snapshot.paramMap.get('id');

---

在这里，您正在使用this.item调用menuService.patchAdd，但我想您想使用输入值name和price创建一个新的Item实例。

// 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函数期望一个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，而不是完整的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() { }