Cách gửi bài đăng với biểu mẫu dữ liệu trong angular2

Question

Tôi cố gắng đăng dữ liệu với angular2 nhưng tôi có yêu cầu không hợp lệ 400 khi tôi đang cố gắng đăng ... Với thử nghiệm ở bưu tá, mọi thứ đều ổn, tôi có 200 và thành công

Nhưng, với angular2

tôi có một yêu cầu xấu 400 gì tôi đang làm sai? Cảm ơn bạn !

Mã của tôi. Dịch vụ gọi API: thành phần

userAddReview(paramsObj) { 
    let headers = new Headers(); 
    headers.append('Content-Type', 'application/json; charset=UTF-8'); 
    let params = this.util.transformRequest(paramsObj); 
    console.log('sending request'); 
    return this.authHttp.post(this.wpApiURL + '/users-reviews/reviews?' + params, JSON.stringify({}), { headers: headers }) 
     .map(
      res => { 
       let newReview = res.json(); 
       this.reviews.push(newReview); 
       console.log(this.reviews); 
       return newReview; 
      } 
     ); 
} 

bài viết:

submitReview(form) { 
    console.log(this.review, form); 
    let params = { 
     id: this.review.post, 
     user_id: this.wp.getCurrentAuthorId(), 
     name: this.wp.getCurrentAuthorId(), 
     email: this.wp.getCurrentAuthorId(), 
     title: this.review.rating_title, 
     description: this.review.rating_comment, 
     rating:  this.review.rating_score, 
    }; 
    console.log("Review", params); 
    this.review.author = this.wp.getCurrentAuthorId(); 
    this.wp.userAddReview(params) 
      .subscribe(
       data => { 
        this.statusMessage = "Review added successfully!"; 
        //clear form 
        form.reset(); 
       }, 
       error => { 
        console.log(error._body); 
        this.statusMessage = error._body; 
       } 
    ); 

mẫu:

<form name="reviewForm" #reviewForm="ngForm" novalidate *ngIf="showPanel()"> 
    <div *ngIf="!reviewText.valid && (reviewText.dirty || reviewText.touched)" class="alert alert-danger padding">review is required</div> 

    <div class="padding">{{statusMessage}}</div> 
    <ion-input type="text" [(ngModel)]="review.rating_score" #reviewScore="ngModel" name="reviewScore" placeholder="enter your review score..." required></ion-input> 
    <ion-input type="text" [(ngModel)]="review.rating_title" #reviewTitle="ngModel" name="reviewTitle" placeholder="enter your review title..." required></ion-input> 
    <ion-textarea 
     [(ngModel)]="review.rating_comment" 
     #reviewText="ngModel" 
     name="reviewText" 
     type="text" 
     rows="2" 
     placeholder="enter your review..." 
     required 
     > 
    </ion-textarea> 

    <ion-grid> 
     <ion-row> 
      <ion-col *ngIf="!isEditMode"><button ion-button block (click)="submitReview(reviewForm)" [disabled]="!reviewForm.valid">Add</button></ion-col> 
      <ion-col *ngIf="isEditMode"><button ion-button block (click)="updateReview(reviewForm)" [disabled]="!reviewForm.valid">Update</button></ion-col> 
      <ion-col width-33><button ion-button block (click)="onCancel()">Cancel</button></ion-col> 
     </ion-row> 
    </ion-grid> 

</form> 

<p *ngIf="!showPanel() && auth.authenticated()" (click)="isEditing = true;">Add Review</p> 
<p *ngIf="!auth.authenticated()" (click)="reviewFormNotAuthClicked()">Add Review (login required)</p> 

Answer 1

chris gửi params cùng với tiêu đề, Dưới đây là mã

let url= `${this.wpApiURLl}users-reviews/reviews`; 
    let params = new URLSearchParams; 
    params.append('id', id); 
    params.append('user_id', user_id); 
return this.authHttp.post(url, { headers:headers, search:params }) 
.map(
      res => { 
       let newReview = res.json(); 
       this.reviews.push(newReview); 
       console.log(this.reviews); 
       return newReview; 
      } 
     ); 

Answer 2

Từ yêu cầu và từ hình ảnh, có vẻ như bạn đang gửi dữ liệu biểu mẫu qua url thay vì phần thân của yêu cầu. Thay đổi:

return this.authHttp.post(this.wpApiURL + '/users-reviews/reviews?' + params, JSON.stringify({}), { headers: headers }) 

Để:

return this.authHttp.post(this.wpApiURL + '/users-reviews/reviews', params, { headers: headers }) 

Hãy nhớ để thiết lập params như đối tượng URLSearchParams. let params = new URLSearchParams()

Answer 3

@Venkateswaran, không có gì thực sự tốt hơn:

let params = new URLSearchParams; 
    params.append('id', '5'); 
    params.append('user_id', '1'); 
    console.log('sending request'); 
    return this.authHttp.post(url, { search:params }) 
     .map(
      res => { 
       let newReview = res.json(); 
       this.reviews.push(newReview); 
       console.log(this.reviews); 
       return newReview; 
      } 
     ) 
     .subscribe(
       data => { 
        this.statusMessage = "Review added successfully!"; 
        //clear form 
        form.reset(); 
       }, 
       error => { 
        console.log(error._body); 
        this.statusMessage = error._body; 
       } 
    ); 
} 

Và yêu cầu paylod trống:

{ 
    "search": { 
    "rawParams": "", 
    "queryEncoder": {}, 
    "paramsMap": {} 
    } 
}