Question

人们：

我有一个 ionic 应用，其中有一个页面，用户可以在其中对故事发表评论。如果用户发表新评论，该评论将显示在页面中。使用带有 *ngFor 的“let comment of postComments”片段从 REST API 获取评论。

hr {border-style: none; border-top-style: dotted; border-color: grey; border-width: 6px; width: 5%; }

在我的打字稿中，我有一个函数 addComment() 刷新 postComments 的值，以便页面自动重新加载。

<ion-content *ngIf="!searchUser" #myContent padding [scrollEvents]="true">
  <ion-refresher slot="fixed" (ionRefresh)="reloadPage($event)">
    <ion-refresher-content pullingIcon="arrow-dropdown" refreshingSpinner="circles" refreshingText="Refreshing..." >
    </ion-refresher-content>
  </ion-refresher>
  
  <div class="post-content">
    <ion-item lines="none" no-padding>
      <ion-avatar slot="start">
        <img [src]=" (profileUrl == null) ? 'assets/img/emptyperson.jpg' : profileUrl">       
      </ion-avatar>

      <p class="user-post-text">
        <strong>{{
          username
        }}</strong><span>
          {{ description }}
        </span>
      </p>
    </ion-item>

    <div class="border"></div>

    <ion-item-sliding class="comments-container" *ngFor="let comment of postComments; let i = index; let c = count;" [id]="'slidingItem' + i">
      <ion-item  no-padding lines="none">
        <ion-avatar slot="start">
          <img [src]=" (comment.profileUrl == null) ? 'assets/img/emptyperson.jpg' : comment.profileUrl">       
        </ion-avatar>
        <p>
          <strong>{{
            comment.username
          }}</strong>
          {{ comment.comment }}
        </p>
        <ion-button
          slot="end"
          fill="clear"
          (click)="likeButton(comment.id, comment.currentUserLike)"
          [disabled]="disableLikeButton"
        >
          <ion-icon
            *ngIf="!comment.currentUserLike"
            slot="icon-only"
            name="heart-outline"
            color="black"
          ></ion-icon>

          <ion-icon
            *ngIf="comment.currentUserLike"
            slot="icon-only"
            name="heart"
            color="danger"
          ></ion-icon>
        </ion-button>
        <br/>
      </ion-item>
      <ion-item-options *ngIf="isPostMine && (comment.userId != userdetails.id)">
        <ion-item-option color="danger" >
          <button color="danger" [disabled]="disableDeleteButton" (click)="removeComment(comment.id,i)"><ion-icon class="inside-icon" name="trash"></ion-icon></button>
        </ion-item-option>
        <ion-item-option color="primary" >
          <button color="primary" (click)="reportOffensive(comment.id,i)"><ion-icon class="inside-icon" name="remove-circle"></ion-icon> </button>
        </ion-item-option>
      </ion-item-options>
      <ion-item-options *ngIf="isPostMine && (comment.userId == userdetails.id)">
        <ion-item-option color="danger" >
          <button color="danger" [disabled]="disableDeleteButton" (click)="removeComment(comment.id,i)"><ion-icon class="inside-icon" name="trash"></ion-icon></button>
        </ion-item-option>
        </ion-item-options>
      <ion-item-options *ngIf="!isPostMine && (comment.userId != userdetails.id)">
        <ion-item-option color="primary" >
          <button color="primary" (click)="reportOffensive(comment.id,i)"><ion-icon class="inside-icon" name="remove-circle"></ion-icon> </button>
        </ion-item-option>
        </ion-item-options>
      <ion-item-options *ngIf="!isPostMine && (comment.userId == userdetails.id)">
        <ion-item-option color="danger" >
          <button color="danger" [disabled]="disableDeleteButton" (click)="removeComment(comment.id,i)"><ion-icon class="inside-icon" name="trash"></ion-icon></button>
        </ion-item-option>
      </ion-item-options>
      <p class="all-comments">
        <span class="grey-text">  {{ comment.createdAt | timeAgo }}</span>
        <span *ngIf="comment.numLikes > 0" class="grey-text tab" (click)="userList(comment.id,'CommentLikes')">{{comment.numLikes}} likes</span>
      </p>

        
      </ion-item-sliding>
  </div>
</ion-content>

<ion-footer>
  <ion-item lines="none">
    <ion-avatar slot="start">
      <img src="{{ userProfileUrl }}" />
    </ion-avatar>

    <ion-textarea autocapitalize="sentences" maxLength="255" type="text"
      [(ngModel)]="commentContent" (ionChange)="getUsers($event)"
      rows="1"
      placeholder="Add a comment"
    ></ion-textarea>

    <ion-icon class="blueicon" slot="end" name="send" (click)="addComment()"></ion-icon>

  </ion-item>
</ion-footer>

当我从故事进入评论页面时，这很有魅力。

这是我的问题。如果我从 oneSignal 推送通知导航到“评论”页面，则在我输入新评论之前一切正常。当我输入新评论时，评论是使用 RESTAPI 在数据库中创建的（工作正常），在打字稿中调用 refreshPostComments 方法（工作正常），但我的视图不会更新，直到我再次物理点击评论框。

我不知道我做错了什么。但是在我的 app.component.ts 中，我检查了 oneSignal 通知是否被点击，如果被点击，我会这样做

addComment() {


    if (this.commentContent.trim()) {
      this.showLoader("Posting Comment ...");
      this.userPostComment.comment = this.commentContent;
      this.userPostCommentJSON = JSON.stringify(this.userPostComment);
      //console.log("Comment JSON is "+this.userPostCommentJSON);

      this.https.post(this.serviceUrl+'comments',this.userPostCommentJSON,this.httpOptions)
        .subscribe(
            (res: any)=>{
              this.commentContent = "";
              this.refresh();
              setTimeout(() => {
                console.log("In Timeout");
                this.refreshPostComments("");
                this.events.publish('postComment:created', {
                  id: res.id,
                  time: new Date()
                }); 
                this.hideLoader(); 
                this.commentContent = "";    
              },2000)
              },
              err => {
                  this.hideLoader();
                  this.showAlert(err);
              }
        );
    }
  }

那行得通。带我到评论页面。但是一旦我进入页面，我几乎可以像桃子一样做任何其他事情，除非我添加评论，然后它不会实时反映。

关于我遗漏的任何指示？

JR

Answer 1

找到了我的解决方案。我认为 Angular 的变更检测是由某些事件触发的，当我从 OneSignal 的通知导航到页面时 - 无论 OneSignal 使用的是什么，它都没有被 Angular 发现。因此，我必须导入 ChangeDetectorRef 并手动执行 detectChanges() 以确保 ngFor 会在更改发生后立即检测到。

呸。在这上面花了将近半天的时间。 OneSignal 和 Angular 对 OneSignal 的怪癖到此为止。而 Ionic 与此无关。

问候， JR

离子推送通知打开页面但页面导航混乱

1 个答案: