如何將多個參數從 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))
    );