角2 - IDによる削除メソッドが動作しない

Question

テーブルからオブジェクトを削除しようとしていますが、コンポーネントにパラメータとして渡していますが、最終的にバックエンドの呼び出し時にID常にnullです。

私のHTMLコードは次のようになります。

<tr *ngFor="let articulo of articulos | nombre: nombreText | familia: familiaText | codigo: codigoText | paginate: {itemsPerPage: 15, currentPage:page, id: '1' };"> 
    <td>{{articulo.codigo}}</td> 
    <td>{{articulo.proveedor}}</td> 
    <td>{{articulo.nombre}}</td> 
    <td>{{articulo.familia}}</td> 
    <td>{{articulo.precio}}</td> 
    <td>{{articulo.fechaModificacion}}</td> 
    <td>{{articulo.anotaciones}}</td> 
    <td> 
     <div class="btn-group btn-group-sm pull-right" > 
     <button class="btn btn-xs pink whiteFont" title="Editar artículo"> 
      <i class="fa fa-pencil" aria-hidden="true"></i> 
     </button> 
     <button (click)="deleteArticulo(articulo); $event.stopPropagation()" class="btn btn-xs pink whiteFont" title="Eliminar artículo"> 
      <i class="fa fa-trash-o" aria-hidden="true"></i> 
     </button> 
     </div> 
    </td> 
</tr> 

ArticulosComponent.tsはメソッドの削除：

delete(id: number) { 
     const url = `${this.articulosURL}/${id}`; 
     return this.http.delete(url, { headers: this.headers }).map(() => null); 
    } 

そして最後に、私：ArticulosService.tsは、メソッドを削除

deleteArticulo(articulo: Articulo): void { 
     this.articulosService.delete(articulo.id).subscribe(); 
    } 

をJavaコントローラ：

@DeleteMapping("/articulos/{id}") 
    public ResponseEntity<Void> deleteArticulo(Integer id){ 
     try { 
      articulosService.delete(id); 
      return new ResponseEntity<Void>(HttpStatus.OK); 
     } catch(Exception e) { 
      return new ResponseEntity<>(HttpStatus.INTERNAL_SERVER_ERROR); 
     } 
    } 

これについてのヒントはありがたいです。ありがとうございました！

PS：私の英語、イムないネイティブスピーカーのために申し訳ありません

Answer 1

理由は、Javaバックエンドがそれに渡された値をマッピングする方法を知らないです。この場合、PathVariableが文字列であるよう@PathVariable

@DeleteMapping("/articulos/{id}") 
 
public ResponseEntity<Void> deleteArticulo(@PathVariable Integer id){ 
 
    try { 
 
     articulosService.delete(id); 
 
     return new ResponseEntity<Void>(HttpStatus.OK); 
 
    } catch(Exception e) { 
 
     return new ResponseEntity<>(HttpStatus.INTERNAL_SERVER_ERROR); 
 
    } 
 
}

これは、練習を賭けていない、JavaはしばしばIntegerへの変換時にエラーをスローする場合があります。私がこれをやる方法は以下の通りです。

publuc class Args { 
 
    id: string; 
 
    val: string; 
 
} 
 

 

 
delete(id: number) { 
 
    let optionsArray: Args[] = [ 
 
     {id: "id" val: id.toString()} 
 
    ]; 
 
    return this.http.delete(this.articulosURL, this.addRequestOptions(oprionsArray, null)).map(() => null); 
 
} 
 

 
/*** 
 
* Generates default headers I.E. #Authorization and append any optional headers provided 
 
* @param {Args[]} args an array of Args[KEY, Value] 
 
* @returns {Headers} 
 
*/ 
 
private addHeader(args: Args[]): Headers { 
 
    let headers: Headers = new Headers(); 
 

 
    // Use this block only if you have Spring OAuth2 security or any other security that require Authorization client id 
 
    let a: Args = new Args; 
 
    a.id = "Authorization"; 
 
    a.val = "your client id"; 
 
    headers.append(a.id, a.val); 
 
    // END 
 

 
    if (args == null) return headers; 
 
    args.forEach(a => { 
 
    headers.append(a.id, a.val); 
 
    }); 
 
    return headers; 
 
} 
 

 
/*** 
 
* Generates default headers as default option and add any provided search parameters to the #RequestOptions 
 
* @param {Args[]} args an array of request parameters 
 
* @param {Args[]} headers an array of optional headers 
 
* @returns {RequestOptions} 
 
*/ 
 
private addRequestOptions(args: Args[], headers: Args[]): RequestOptions { 
 
    let options: RequestOptions = new RequestOptions(); 
 
    options.headers = this.addHeader(headers); 
 
    options.params = new URLSearchParams(); 
 
    if (args == null || args == []) return options; 
 
    args.forEach(a => { 
 
    options.params.append(a.id, a.val); 
 
    }); 
 
    return options; 
 
}

@DeleteMapping("/articulos/", produces = MediaType.APPLICATION_JSON_VALUE) 
 
public ResponseEntity deleteArticulo(@RequestParam String id){ 
 
    try { 
 
     articulosService.delete(Integer.valueOf(id)); 
 
     return new ResponseEntity<Void>(HttpStatus.OK); 
 
    } catch(Exception e) { 
 
     return new ResponseEntity<>(HttpStatus.INTERNAL_SERVER_ERROR); 
 
    } 
 
}