在 angular2 中使用 http.post 时出错

Question

我收到 400（错误请求）错误。单击 abc.component.html 中的按钮会调用方法 search($event,'btn')，稍后会调用服务中的某些方法来获取数据。

这里，getFilteredData()方法正在提供数据，而searchData()方法没有提供数据，但提供400错误。Here is the image showing error

abc.component.html

<input [(ngModel)]="searchData" class="form-control"  type="text" placeholder="Search Keywords : 'Lenovo', 'May', 'New York'" style="height: 30px;" />
<input  type="checkbox" id="chckbox" [(ngModel)]="checked" class="form-control"  style="width: 34px;height: 32px;margin:0px;" #chkbox checked>

<button (click)="search($event,'btn')" class="btn btn-success" style="height:30px;padding: 0px 30px">Search </button>

json-data.service.ts

searchData(searchText:JsonData): Observable<JsonData[]> {
            console.log('Retriving Data from Solr Server.......');
            let headers = new Headers({ 'Content-Type': 'application/json' });
            let options = new RequestOptions({ headers: headers });
            let url = "http://192.10/PIdString";
            return this.http.post(url,searchText,options).map((res: Response) => res.json()).catch(this.handleError);
          }

getFilteredData(searchText:JsonData): Observable<JsonData[]> {
                console.log('Retriving Data from Solr Server.......' + JSON.stringify(searchText));
                let headers = new Headers({ 'Content-Type': 'application/json' });
                let options = new RequestOptions({ headers: headers });
                let url = "http://1921.le"; //Local Server
                return this.http.post(url, searchText,options).map((res: Response) => res.json()).catch(this.handleError);
              }

abc.component.ts

checked:boolean = true;
          constructor(public jsonDataService: JsonDataService, public injector: Injector) { }

      search(event, from) {
            if(this.checked){
              alert("checked");
            }
            else{
              alert("unchecked");
            }
            if (this.searchData === "" || this.searchData === null) {
           alert("Enter any keyword to search !");
            }else if(this.checked === true && this.searchData === "" || this.searchData === null ){
              alert("Enter any keyword to search !");
            }else if(this.checked !== true && this.searchData === "" || this.searchData === null){
        alert("Enter any keyword to search !");
            }else if(this.checked === true && (this.searchData !== "" || this.searchData !== null)){
        console.log("checked");
        console.log("Searching.......");
           this.jsonDataService.getFilteredData(this.searchData).subscribe(
                  success => this.buildDataUI1(success),
                  error => this.errorMessage = <any>error);  
            }
            else if(this.checked === false && (this.searchData !== "" || this.searchData !== null)){
              console.log("unchecked");
              console.log("Searching.......");
                 this.jsonDataService.searchData(this.searchData).subscribe(
                    success => this.buildDataUI1(success),
                    error => this.errorMessage = <any>error);      
            } 
        }

Answer 1

我看不出你的 JSONData 是什么样的，所以我只是猜测。

您的模型 searchData 似乎是一个基于您的 <input> 占位符的字符串。
您的组件通过 searchData 作为您的服务功能。
您的服务函数直接通过 searchData 作为您的 POST 负载。

您的端点可能需要一个 JSON 字符串，而不是纯字符串。

在 angular2 中使用 http.post 时出错

error using http.post in angular2

angular-services

angular