时间戳

首页 > 解决方案 > 如何在不重新加载或刷新 ionic 4 页面的情况下获得类似的帖子状态？

angular - 如何在不重新加载或刷新 ionic 4 页面的情况下获得类似的帖子状态？

问题描述

我有一个动态的帖子列表。在每篇文章中，我都添加了“赞”和“评论”按钮。我的问题是，当我单击“赞”按钮时，我必须手动重新加载页面才能显示更改。

我想到的一种解决方案是向 like 按钮的(click)事件添加 API 调用，以便它重新加载页面，但这看起来不太好。

page.html

    <ion-col *ngIf="feed.IsLike" tappable>
        <ion-icon (click)="toggleLikeState(feed.UserId, feed.PostId);$event.stopPropagation();" tappable
            name="heart"></ion-icon>&nbsp;&nbsp;
        <span *ngIf="feed.LikesCount > 0">{{feed.LikesCount}}</span>
    </ion-col>
    <ion-col *ngIf="!feed.IsLike" tappable>
        <ion-icon (click)="toggleLikeState(feed.UserId, feed.PostId);$event.stopPropagation();" tappable
            name="heart-empty"></ion-icon>&nbsp;&nbsp;
        <span *ngIf="feed.LikesCount > 0">{{feed.LikesCount}}</span>
    </ion-col>

页面.ts

    toggleLikeState(UserId: number, PostId: number) {
    this.storage.get('userID').then(async (loggedinUId) => {
      const value: {
        LoginUserId: string,
        UserId: number,
        PostId: number
      } = {
        LoginUserId: loggedinUId,
        UserId: UserId,
        PostId: PostId
      };
      this.apiService.postLike(value).then(async (success) => {
        console.log("succ", success);
        if (success = 0) {
          console.log(success);
          this.IsLike = !this.IsLike;
          this.apiService.getPostsfeeds().then((data: any[]) => {
            this.feedlist = data;
          });
          if (this.IsLike) {
            this.iconName = 'heart';
          } else {
            this.iconName = 'heart-empty';
          }
        } else {
          this.IsLike = !this.IsLike;
          this.apiService.getPostsfeeds().then((data: any[]) => {
            this.feedlist = data;
          });
          if (this.IsLike) {
            this.iconName = 'heart';
          } else {
            this.iconName = 'heart-empty';
          }
        }
      }, error => {
        console.log("Error", error);
      });
    });
    }

Here my code, is there any way to display like's without reloading the page or I have to user socket.io?

标签： angularionic4

解决方案

好吧，对于初学者来说，您可以通过使用三元运算符而不是 *ngIf 指令来改进 HTML 视图。您只能将其应用于图标的名称，因为其余的标记将保留在这两种情况下。

{{ condition? 'conditionWasTrue' : 'conditionWasFalse' }}是在一行中编写 if-else 的好方法，那么您的 HTML 代码将如下所示：

<ion-col tappable>
    <ion-icon (click)="toggleLikeState(feed.UserId,feed.PostId);$event.stopPropagation();" 
              tappable name="{{feed.IsLike ? 'heart' : 'heart-empty'}}">
    </ion-icon>&nbsp;&nbsp;
    <span *ngIf="feed.LikesCount > 0">{{feed.LikesCount}}</span>
</ion-col>

然后在您的 typeScript 文件中，您将不再需要“iconName”变量，因此您可以删除它的大部分内容，它会开始看起来更干净。更好的是，您可以将接口声明移到函数范围之外：

编辑：如果您想在不刷新视图的情况下更新点赞数，则需要在apiService.postLike()方法响应期间返回新的点赞数。

在 postLike() 成功时更新后端 API 以包含新的 LikesCount 后，您可以使用新response.LikesCount属性来更新组件的内部变量：

interface UserLikedPost {
    LoginUserId: string,
    UserId: number,
    PostId: number
}

toggleLikeState(UserId: number, PostId: number) {
  this.storage.get('userID').then(async (loggedinUId) => {
    const value: UserLikedPost = {
      LoginUserId: loggedinUId,
      UserId: UserId,
      PostId: PostId
    };

    this.apiService.postLike(value).then(
      async (success) => {
        console.log("succ", success);
        this.IsLike = !this.IsLike;
        this.feed.LikesCount = success.LikesCount; // Here is where you update your likes without refreshing. 
        this.apiService.getPostsfeeds().then((data: any[]) => {
          this.feedlist = data;
        });
      }, (error) => {
        console.log("Error", error);
      });
  });
}

每次您想使用新信息更新屏幕视图时，您都需要执行 API 调用，但它不需要看起来那么糟糕。希望这对您有所帮助！

推荐阅读