从 Angular 到 Net Core HTTP 404 发布错误

Question

我正在创建一个全栈 Web 软件，我正在使用 Angular、Net Core 和 Mssql...我的 Web api 已经准备好，如果我使用 Postman，没有任何问题。我可以在网页上的 Bootstrap 表中列出所有产品。但是，如果从 Angular（角度形式）发送信息，则会出错。 “无法将 JSON 值转换为 System.Int32” 看起来像类型转换错误。我将验证规则从categoryId: ["", Validators.required] 更改为categoryId: [parseInt(""), Validators.required] 或categoryId: [0, Validators.required] 我的模型变量类型是数字。我不明白。提前谢谢...

我在 Github 的整个项目：https://github.com/SuperSayiyajin/FullStack_Workshop/tree/main/Northwind_Final

这是我的 Net Core WebApi 控制器方法：

[HttpPost("add")]
public IActionResult Add(Product p)
{
    var result = _productService.Add(p);
    if (result.Success)
    {
        return Ok(result);
    }
    return BadRequest(result);
}

这是我的产品添加模块：

import { ToastrService } from 'ngx-toastr';
import { ProductService } from './../../services/product.service';
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, FormControl, Validators } from "@angular/forms";

@Component({
    selector: 'app-product-add',
    templateUrl: './product-add.component.html',
    styleUrls: ['./product-add.component.css']
})
export class ProductAddComponent implements OnInit {
    addProductForm: FormGroup;
    constructor(private formBuilder: FormBuilder,
        private productService: ProductService,
        private toastrService: ToastrService) { }

    ngOnInit(): void {
        this.createAddProductForm();
    }

    createAddProductForm() {
        this.addProductForm = this.formBuilder.group({
            productName: ["", Validators.required],
            categoryId: ["", Validators.required],
            unitsInStock: ["", Validators.required],
            unitPrice: ["", Validators.required],
        });
    }

    addProduct() {
        if (this.addProductForm.valid) {
            let product = Object.assign({}, this.addProductForm.value);
            this.productService.addProduct(product).subscribe(response => {
                console.log(response);
                this.toastrService.success(response.message, "Completed")
            }, responseError => {
                console.log(responseError.error);
                this.toastrService.error(responseError.error);
            });
        } else {
            this.toastrService.error("Product is not valid", "Error");
        }

        //console.log(product);
    }
}

这是我的产品服务。

import { ResponseModel } from './../Models/responseModel';
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { ListResponseModel } from '../Models/listResponseModel';
import { Product } from '../Models/product';

@Injectable({
    providedIn: 'root',
})
export class ProductService {
    apiURL = 'https://localhost:44324/api/';

    constructor(private httpClient: HttpClient) { }

    getProducts(): Observable<ListResponseModel<Product>> {
        let newPath = this.apiURL + 'products/getall';
        return this.httpClient.get<ListResponseModel<Product>>(newPath);
    }

    getProductsByCategoryId(
        categoryId: number
    ): Observable<ListResponseModel<Product>> {
        let newPath =
            this.apiURL + 'products/getallbycategoryid?categoryId=' + categoryId;
        return this.httpClient.get<ListResponseModel<Product>>(newPath);
    }

    addProduct(product: Product): Observable<ResponseModel> {
        return this.httpClient.post<ResponseModel>(this.apiURL + "products/add", product);
    }
}

这是 product-add.html

<div class="content">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h5 class="title">Add Product</h5>
            </div>
            <div class="card-body">
                <form [formGroup]="addProductForm">
                    <div class="mb-3">
                        <label class="Labels" for="productName">Product Name</label>
                        <div class="form-group">
                            <input class="col-9" type="text" id="productName" formControlName="productName"
                                class="form-control" placeholder="Product Name" />
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="Labels" for="categoryId">Product Category</label>
                        <div class="form-group">
                            <input type="text" id="categoryId" formControlName="categoryId" class="form-control"
                                placeholder="Category Id" />
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="Labels" for="unitsInStock">Product Stock</label>
                        <div class="form-group">
                            <input type="text" id="unitsInStock" formControlName="unitsInStock" class="form-control"
                                placeholder="Stock" />
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="Labels" for="unitPrice">Product Price</label>
                        <div class="form-group">
                            <input type="text" id="unitPrice" formControlName="unitPrice" class="form-control"
                                placeholder="Price" />
                        </div>
                    </div>
                </form>
            </div>
            <div class="card-footer">
                <button class="btn btn-fill btn-primary" (click)="addProduct()">Add Product</button>
            </div>
        </div>

    </div>

</div>

Answer 1

感谢冰冷。看来我太累了。输入 type="number" 解决了这个问题。

<div class="form-group">
       <input type="number" id="categoryId" formControlName="categoryId" class="form-control" placeholder="Category Id" />
</div>

Answer 2

产品类中的categoryId 是数字类型，所以是的，您应该使用 categoryId: [0, Validators.required] 或 categoryId: [null, Validators.required] 和 <input type="number">

您没有收到编译错误的原因是因为您所有的 Typescript 代码都翻译为 JavaScript，而在 JS 中我们没有像 typescript 中那样的类型检查。 请注意，this.form.value 的类型是 any，这就是 typescript 也没有检测到它的原因。