Блог

Я создаю веб-программное обеспечение fullstack и использую Angular,Net Core и Mssql…Мой веб-api готов,и если я использую Postman, то никаких проблем не возникнет. Я могу перечислить все продукты в своей таблице начальной загрузки на веб-странице. Но если отправлять информацию из угловой(угловой формы), это дает ошибку. «Значение 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>
 

Спасибо, Айсикул. Похоже, я так сильно устала.Тип ввода=»число» исправлена проблема.

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

categoryId в классе продукта указан номер типа, поэтому да, вы должны использовать categoryId: [0, Validators.required] или categoryId: [null, Validators.required] и <input type="number">

И причина, по которой вы не получили ошибку компиляции, заключается в том, что весь ваш код Typescript переводится на JavaScript, а в JS у нас нет проверки типов, как в typescript. Пожалуйста, обратите внимание, что this.form.value это тип any, поэтому typescript также не обнаружил его.