通过表单传递的元素未被服务器接收也未显示在前端。修补方法 | Angular |下拉精灵

Question

服务器端显示调用了 PATCH 方法并在数组末尾添加了一个空值，而不是使用从用户输入中获取的名称和价格的新项目数组。

服务组件中的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>

后端（Dropwizard）中的 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);
   }

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

Answer 1

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

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

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

此处您使用 this.item 调用 menuService.patchAdd，但我想您想要使用输入值 name 和 [=24] 创建一个新的 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() { }

通过表单传递的元素未被服务器接收也未显示在前端。修补方法 | Angular |下拉精灵

Elements passed through a form not received by the server nor displayed on the front. PATCH method | Angular | Dropwizard

javascript

java

dropwizard

typescript

angular