如何传递请求模型以获取 Angular 7/8 上的 API？答案

【问题标题】：How to pass request model to get API on Angular 7/8?如何传递请求模型以获取 Angular 7/8 上的 API？
【发布时间】：2020-02-09 03:17:02
【问题描述】：

我有 Get Api 来获取用户数据，我可以将请求模型传递给基于请求模型的搜索用户列表。它在 Postman 上运行良好，但是当我尝试在 Angular 7 和 8 中实现它时它不起作用。

请指导我如何实施。

我的实现如下

邮递员

    URL = http://localhost:64888/api/Users/SearchUsers     
    Header : Content-Type = application/json

    Body = 
    {
        "firstname" : "value",
        "lastname" : "value",
        "emailid" : "value",
        "usertype" : "value",
    }

邮递员结果：它工作正常并提供用户列表

请求模型

export class UserRequest {  
     firstname : string;
     lastname : string;
    emailid : string;
    usertype : string;
    }

用户服务

    export class UserService {

      constructor(private http: HttpClient) { }

      SearchUsers(requestParam : UserRequest) : Observable<any>{  

        const httpOptions = {
          headers: { 
          'Content-Type': 'application/json',
          'Authorization' : 'Bearer Tokenvalue'
          },
          params: requestParam
        };

        return this.http.get("http://localhost:64888/api/Users/SearchUsers", httpOptions); 
      }
    }

用户组件

   export class UserComponent implements OnInit {

     constructor(private userService : UserService) { }

     ngOnInit() {

       var requestParam : UserRequest;
       requestParam.firstname = "r";
       requestParam.lastname = "";
       requestParam.emailid = "";
       requestParam.usertype = "user";

       this.userService.SearchUsers(requestParam)
         .subscribe( 
           data => {
             console.log(data);
           }
          )
     }
   }

【问题讨论】：

你能提供 stackblitz 或 fiddle 吗
您很可能在这里遇到了 CORS 问题。

标签： angular angular7 angular8

【解决方案1】：

如果您想在正文中发送参数，则使用 POST 请求，主要是在 GET 请求中，参数在 url 中发送请看这个链接 see this

像这样转换你的请求

 SearchUsers(requestParam : UserRequest) : Observable<any>{  

    const httpOptions = {
      headers: { 
      'Content-Type': 'application/json',
      'Authorization' : 'Bearer Tokenvalue'
      }
    };

    return this.http.get("http://localhost:64888/api/Users/SearchUsers?firstname=value&lastname=value&emailid=value&userid=value", httpOptions); 
  }

【讨论】：

感谢您的回复，但我不想使用发布请求来获取数据。因为它在邮递员和 .net 代码中工作，所以我相信它肯定也应该在 Angular 中工作。

【解决方案2】：

试试下面的代码，用你在 UserService 中的代码替换

export class UserService {

  constructor(private http: HttpClient) { }

  SearchUsers(requestParam : UserRequest) : Observable<any>{  

    const httpOptions = {
      headers: { 
      'Content-Type': 'application/json',
      'Authorization' : 'Bearer Tokenvalue'
      },
    };

    return this.http.get("http://localhost:64888/api/Users/SearchUsers+"?firstname="+requestParam.firstname+"&lastname="+requestParam+"&emailid="+requestParam.emailid +"&usertype="+requestParam.usertype ", httpOptions); 
  }
}

【讨论】：

praful jain，首先请理解问题。