Angular 2 - 通過ID不起作用的HTTP刪除方法

Question

我試圖從表中刪除一個對象，並將其作爲參數傳遞給組件，但是，當我最終向後端調用ID時的對象始終爲空。

我的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刪除方法：

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

的ArticulosService.ts刪除方法：

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

最後，我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

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

這不是打賭的做法，因爲PathVariable是一個字符串，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); 
 
    } 
 
}