laravel 更新数据的 api 不起作用

Question

我正在使用 api 从 ionic 项目发送数据。并从 laravel 接收。我的“添加”产品 api 工作正常。但“更新”产品 api 不起作用。

我可以从浏览器检查工具中看到请求负载获取了正在发送到 laravel 的数据。因此，数据正在发送，但 Laravel 无法真实接收该数据。

这是api的更新功能。

public function update(Request $request, Product $product)
{

// Validate request
$validatedData = $request->validate([
    'account_type' => 'required|in:1,2',
    'name' => 'required|string|max:255',
    'description' => 'nullable|string',
    'price' => 'required|numeric|min:0'
]);

// Update product
$product->update($validatedData);

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

这给出了以下错误

account_type    [ "The account type field is required." ]
name    [ "The name field is required." ]
price   [ "The price field is required." ]
and so on..

Laravel 由于某种原因无法读取数据。

更新

<form [formGroup]="productForm" (ngSubmit)="onSubmit()">
<!-- Add Type -->
<ion-item>
  <ion-label>Add Type <span class="required">*</span></ion-label>
  <ion-radio-group formControlName="account_type">
    <ion-item>
      <ion-label>Individual</ion-label>
      <ion-radio slot="start" value="1"></ion-radio>
    </ion-item>
    <ion-item>
      <ion-label>Business</ion-label>
      <ion-radio slot="start" value="2"></ion-radio>
    </ion-item>
  </ion-radio-group>
</ion-item>

<!-- Ad Title -->
<ion-item>
  <ion-label position="floating">Ad Title <span class="required">*</span></ion-label>
  <ion-input formControlName="name" type="text"></ion-input>
</ion-item>
<!-- Submit Buttons -->
<div class="ion-padding">
  <ion-button type="submit" expand="block" [disabled]="productForm.invalid">
    {{ isEditMode ? 'Update Product' : 'Submit Now!' }}
  </ion-button>
  <ion-button expand="block" color="light">Preview</ion-button>
</div>

为了简短起见，没有在此处添加所有表单字段。

TS 文件

onSubmit() {
if (this.productForm.valid) {
  const formData = new FormData();
  const formValues = this.productForm.value;

  // Append all form data
  Object.keys(formValues).forEach((key) => {
    if (key !== 'image' && key !== 'additionalImages') {
      formData.append(key, formValues[key]);
    }
  });

  // Handle file inputs
  const mainImage = document.querySelector('[formControlName="image"]') as HTMLInputElement;
  if (mainImage && mainImage.files && mainImage.files[0]) {
    formData.append('image', mainImage.files[0]);
  }

  const additionalImages = document.querySelector('[formControlName="additionalImages"]') as HTMLInputElement;
  if (additionalImages && additionalImages.files) {
    Array.from(additionalImages.files).forEach((file) => {
      formData.append('additionalImages[]', file);
    });
  }

  // Differentiate between add and update
  if (this.isEditMode) {
    const productId = Number(this.route.snapshot.paramMap.get('productId'));
    this.productService.updateProductPost(productId, formData).subscribe(
      (response) => {
        console.log('Product updated successfully:', response);
        this.router.navigate(['/success']);
      },
      (error) => {
        console.error('Error updating product:', error);
      }
    );
  } else {
      // Get the query string parameter
    const categoryId = this.route.snapshot.paramMap.get('categoryId'); // Extract categoryId from query string
    console.log('Category ID:', categoryId);

    // Get the sessionStorage value
    const userId = sessionStorage.getItem('userId'); // Extract userId from sessionStorage

    // Append query string and sessionStorage data to the formData
    if (categoryId) {
      formData.append('category_id', Number(categoryId).toString());
    }
    if (userId) {
      formData.append('seller_id', Number(userId).toString());
    }

    this.productService.addProduct(formData).subscribe(
      (response) => {
        console.log('Product added successfully:', response);
        this.router.navigate(['/success']);
      },
      (error) => {
        console.error('Error adding product:', error);
      }
    );
  }
} else {
  console.error('Form is invalid');
}
}

产品.服务.TS

//Add product (is working)
addProduct(product: FormData): Observable<Product> {
  return this.http.post<Product>(`${this.apiUrl}/products`, product);
}

//update producd
updateProductPost(productId: number, product: FormData): Observable<Product> {
  return this.http.put<Product>(`${this.apiUrl}/products-update/${productId}`, product);
}

api.php 中的 Laravel 路由

Route::put('products-update/{id}', [ProductApi::class, 'update']);

Answer 1

这是错误定义的情况

implicit model-binding

。 当您使用隐式

model-binding

时，您需要对 Route 参数和注入到控制器方法中的模型实例使用相同的

name

（在您的情况下为

update(Request $request, Product $product)

）。

所以像这样改变你的路线定义。

Route::put('products-update/{product}', [ProductApi::class, 'update']);

N：B：-

1. 在 Laravel 部分，这肯定是导致错误的问题。但在前端部分，即使有任何问题，我也无法向您提供任何建议，因为我根本不熟悉角度。
2. 进行上述更改并重新检查。
3. 另请浏览我提供的上述链接，您将获得有关

   implicit model-binding

   的更多详细信息。