如何将多个参数从 angular 8 传递到 .NET Core API

Question

您好，我不确定是否有人发布了这个问题，但由于这是我的第一个问题，我会尽量准确。

我正在尝试将多个字符串参数从 Angular 8 应用程序传递给 .NET Core API，但无济于事。

这是角度代码：

import { Injectable } from '@angular/core';
import { HttpErrorResponse, HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError, tap } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class TestService{
 constructor(private http: HttpClient) { }

  searchSpecificID(formattedNumber: string, vin: string): Observable<number> {

    const paramsIoS = new HttpParams().set('formattedNumber', formattedNumber).set('vin', vin);

    return this.http.get<number>('https://localhost:44353/api/AngularTest/CheckIfIDExists',  {params: paramsIoS}).pipe(
      tap(data => console.log('Checked'),
      catchError(this.handleError))
    );
  }

  private handleError(err: HttpErrorResponse) {
    let errorMessage = '';
    if (err.error instanceof ErrorEvent) {
      errorMessage = `An error occured: ${err.error.message}`;
    } else {
      errorMessage = `Server returned code: ${err.status}, error message is: ${err.message}`;
    }
    console.error(errorMessage);
    return throwError(errorMessage);
  }
}

这是 .NET Core API 控制器中的代码：

 [Route("api/[controller]")]
 [ApiController]
 public class AngularTestController : ControllerBase
 {
    [HttpGet("CheckIfIDExists/{formattedNumber}/{vin}")]
    public int CheckIfIDExists(string formattedNumber, string vin) 
    {
        return 0;
    }
 }

我已经尝试了这些问题的一些组合（ .NET Core API pass multiple ， Angular HTTP get multiple parameters ）但到目前为止没有成功。

我在我的 .NET Core API 应用程序中启用了 cors，因为我有一些没有参数的 HTTP Get 请求并且它们工作正常。

Answer 1

就这样试试

let headers = new HttpHeaders();
headers  = headers.append('responseType', 'json');
return this.http.get<number>(`http://localhost:44353/api/AngularTest/${formattedNumber}/${vin}`, {headers: headers});

你的后端代码应该像

[Route("api/[controller]")]
 [ApiController]
 public class AngularTestController : ControllerBase
 {
    [HttpGet("{formattedNumber}/{vin}")]
    public int CheckIfIDExists(int formattedNumber, string vin) 
    {
        return 0;
    }
 }

Answer 2

您正在尝试将 http 参数转换为路径参数，如果您想要这样的 URL

/api/AngularTest/CheckIfIDEExists?vin=dummy&formattedNumber=dummy 你的代码没问题

但据我所知，这不是您的 api 工作方式，请尝试以下操作：

const paramsIoS = new HttpParams()
 return this.http.get<number>(`https://localhost:44353/api/AngularTest/${formattedNumber}/${vin}`,  {params: paramsIoS}).pipe(
      tap(data => console.log('Checked'),
      catchError(this.handleError))
    );

Answer 3

像这样尝试

 return this.http.get<number>(`https://localhost:44353/api/AngularTest/${formattedNumber}/${vin}`).pipe(
  tap(data => console.log('Checked'),
  catchError(this.handleError))
);

Answer 4

问题在于您传递参数的方式，我从上面的答案中不明白一件事，为什么需要修改 API。 我相信只传递参数应该对你有用。

return this.http.get<number>(`https://localhost:44353/api/AngularTest/CheckIfIDExists/${formattedNumber}/${vin}`).pipe(
      tap(data => console.log('Checked'),
      catchError(this.handleError))
    );