Question

我在IONIC 2应用程序中有一个帖子详细信息页面，并且有一个评论部分，我希望每当有一个批准的评论显示在最近的评论中，并且该页面需要重新加载或评论部分需要更新。

请建议我完成此方法的最佳方法： -

我的评论表单html： -

<!-- Comment -->
        <div class="comment">
            <ion-list top_border *ngIf="comments">
                <ion-item text-wrap *ngFor="let comment of comments">
                    <div img_box>
                        <div thumbnail_img>
                            <img [src]="comment.author_avatar_urls[96]">
                        </div >
                        <div class="tag">
                            <h2>{{comment.author_name}}</h2>
                            <span class="blicon-clock">&nbsp;{{comment.date | date: 'mediumDate'}}</span>
                        </div>
                    </div>
                    <p [innerHTML]="comment.content.rendered"></p>
                </ion-item> 
            </ion-list>

            <div id="commentPanel" class="comment_textarea">
                <form (ngSubmit)="PostComment()">
                     <ion-textarea rows="3" [(ngModel)]="usercomment.comment" name="usercomment" placeholder="Write something..."></ion-textarea>
                     <button ion-button>
                      <ion-icon type="submit" ios="ios-arrow-round-forward" md="md-arrow-round-forward"></ion-icon>
                    </button>
                </form>
            </div>
        </div>
        <!-- Comment -->

这是我的帖子功能： -

PostComment() {
        let loader = this.loadingController.create({
            content: "Please wait"
        });
        loader.present();

        let commentdata : { post: number, content: string, author_name: string, author_email: string } = {
            post: this.post.id, 
            content: this.usercomment.comment, 
            author_name: this.user.user_display_name, 
            author_email: this.user.user_email
        };

        this.myService.PostComment(commentdata)
        .subscribe((result) => {
                if(result.status == "approved") {
                    loader.dismiss();
                    let toast = this.toastController.create({
                        message: "Your comment has been successfully posted.",
                        duration: 2000
                    });
                    toast.present();
                  // TODO Here to page refers
                } else if(result.status == "hold") {
                    loader.dismiss();
                    let toast = this.toastController.create({
                        message: "Your comment is awaiting approval.",
                        duration: 2000
                    });
                    toast.present();
                } else if(result.message) {
                    loader.dismiss();
                    let toast = this.toastController.create({
                        message: result.message,
                        duration: 2000
                    });
                    toast.present();
                } else {
                    loader.dismiss();
                    let toast = this.toastController.create({
                        message: 'There is something wrong, please try again later.',
                        duration: 2000
                    });
                    toast.present();                    
                }
            this.usercomment.comment = '';
        }, (error) => {
          loader.dismiss();
          let errorMessage = error.json();
          if (errorMessage && errorMessage.message) {
            let message = errorMessage.message.replace(/<(?:.|\n)*?>/gm, '');
            let toast = this.toastController.create({
              message: message,
              duration: 6000,
              position: 'bottom'
            });
            toast.present();
         }
      });

请建议。

Answer 1

您无需刷新页面。评论获得批准后，只需将其推入评论数组即可。

[...]
if(result.status == "approved") {
  loader.dismiss();
  let toast = this.toastController.create({
      message: "Your comment has been successfully posted.",
      duration: 2000
  });
  toast.present();
  this.comments.push(commentdata); 
}

Ionic 2重新加载/刷新评论面板或整个页面

1 个答案: