angular2でhttp.postを使用しているエラー

400（Bad Request）エラーが発生しました。メソッドsearch($event,'btn')は、abc.component.htmlのボタンのクリックで呼び出されます。このボタンは、後でデータを取得するためのサービス中のメソッドを呼び出します。angular2でhttp.postを使用しているエラー

ここで、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);  
      } 
     }

出典

2017-06-29 Manzer Ahmad

エラー400は、バックエンドで公開されているペイロードを送信しないことを意味します。バックエンドは何を期待していますか、正確に何を送っていますか？ The ChomeコンソールのNetworkタブの下で見ることができます – trichetriche

実際、私はangular2を初めて使っています。ここでは1つのメソッドはデータを取得し、他のメソッドはURLリクエスト以外は同じであることがわかるようにエラーを出しています。 –

これらは同じですが、同じエンドポイントを呼び出すことはありません。上記のとおり、エンドポイントはエラー400を返します。これは、正しいデータを送信しないことを意味します。ですから、フロントエンドが送信するものとバックエンドが受け入れるものの両方を投稿してください。 – trichetriche