Laravel 5 Angular 5 - 行删除操作

时间:2018-04-13 06:41:58

标签: angular laravel laravel-5 angular5

我有一个Laravel5.5和Angular5项目,其中Angular使用Laravel的API。 product.component.html下的代码是:

<button (click)="deleteProduct(product.id)">Delete This</button>

product.component.ts下的代码如下:

deleteProduct(id){
      console.log('product ID= '+id);
      this.productService.getdeleteProduct(id);

}

在product.service.ts中,我调用了API

getdeleteProduct(id): Observable<any>{
  console.log("get p id ="+ id);
  const url = `${this.url}/api/product/`+id;
  console.log(url); // http://localhost:8000/api/product/8
  return this.http.delete(url,{headers: new HttpHeaders({Authorization:'Bearer '+ this.token})});
}

以下是我的Laravel删除记录代码:

public function destroy($id)
{
    $product = Product::findOrFail($id);
    $product->delete();

    return response()->json($product);
}

产品ID的值在控制台中很好地返回,但是从phpMyAdmin,我看到记录对应的'id'没有被删除。

1 个答案:

答案 0 :(得分:0)

我看到我忘了在product.component.ts中编写代码。它应该是这样的:

deleteProduct(id){
      console.log('product ID= '+id);
      this.productService.getdeleteProduct(id).subscribe(data => {
        console.log(data);
        this.states = data.states;

      }, (err: HttpErrorResponse) => {

          this.dataInvalid = true;
          this.formSubmitting = false;
          if(err.error instanceof Error){
            console.log("haseoor");
            this.formErrors.push(err.error.message);
          } else {
              const errors = err.error;
              const items = [];
              for (const key in errors) {
                if (errors.hasOwnProperty(key)) {
                  items.push(errors[key]);
                }
              }
              for (const k in items[1]) {
                if (items[1].hasOwnProperty(k)) {
                  this.formErrors.push(items[1][k][0]);
                }
              }
            }
        }
      )

  }