在服务返回值之前从角度自定义管道获取返回值答案

【问题标题】：Getting return value from angular custom pipe before service return value在服务返回值之前从角度自定义管道获取返回值
【发布时间】：2020-07-29 16:30:49
【问题描述】：

我正在尝试创建一个自定义管道来获取特定帖子的喜欢，它有一个连接到数据库并提取与特定帖子相关的所有喜欢的服务，但是当我尝试在我的代码中运行时，我得到了返回值在获得服务响应之前，我知道我应该等待响应，但不知道该怎么做。请帮我解决这个问题。

HTML 页面

 <a [ngClass]="{'like': toggle, 'dislike': !toggle}" (click)="addremovecomment($event, mainpost)" class="float-right btn-sm text-black btn mr-1 dislike"><span><i class="fa fa-heart" style="color: dislike;"></i></span><label class="ml-1" id="lbl{{mainpost.id}}">{{mainpost | like }}</label></a>

服务

      getalllikes(post: MainPost): Observable<any> {
    return this.http.post<any>(this.baseUrl + 'GetLikes', post);
  }

管道

import { Pipe, PipeTransform } from '@angular/core';
import { MainPost } from '../_models';
import { LikesService } from '../_services';
import { retry } from 'rxjs/operators';

@Pipe({
  name: 'like'
})
export class LikePipe implements PipeTransform {
  postlikes = 0;
  constructor(private likeservice: LikesService) {

  }
   transform(post: MainPost, ...args: any[]): any {
    const UserId = localStorage.getItem('UserId');
    this.getlikes(post);
    if (this.postlikes === 0) {
      return '0 Likes';
      } else {
      return this.postlikes + ' Likes';
      }
  }
   getlikes(post: any) {
    this.likeservice.getalllikes(post).subscribe(data => {
      console.log();
      // likes = data;
      this.postlikes = data;
    }, (err: any) => console.error(err));

  }

}

【问题讨论】：

管道不是你想要的好选择。管道应该是纯函数。您可以直接在模板中异步订阅服务..
@MikeOne 感谢您的回复，我正在循环浏览数据库中的所有帖子，在页面加载时我想知道有多少喜欢被添加到特定帖子中，并且还想知道当前用户是否已经喜欢这篇文章了，出于同样的原因，我正在使用管道，如果不是管道，请告诉我在角度方面最好的方法是什么
帖子里有赞吗？
是的，喜欢显示在帖子上（在HTML页面上），并且在数据库中喜欢存储在不同的表中。
在您的组件的ngOnInit() 和订阅中执行http 调用，将您在模板中绑定的属性设置为http 调用的结果。基本上将代码从管道移动到组件。

标签： angular typescript angular-services angular-pipe

【解决方案1】：

我认为将视图逻辑保留在管道内是最佳实践，您可以在Observables 的帮助下处理每个帖子的总点赞数，transform 方法应该返回 Subject<T> ：

@Pipe({
  name: 'like'
})
export class LikePipe implements PipeTransform {

  constructor(private likeService: LikeService) {} 

  transform(id: number) : Subject<Object> {
    let likeSubject = new Subject<string>();

    this.likeService.getAllLikes(id)
    .subscribe(
      (posts: number) => {
        let message = "";
        if (posts == 0)
          message = "No Likes"
        else
          message = posts.toString() + " Likes"          

        likeSubject.next(message);
    });
    return likeSubject;    
  }
}

您必须告诉 Angular 使用 async 关键字来解决它：

<span>Post1 {{ ( id | like ) | async}}</span>
<hr>
<span>Post2 {{ ( id2 | like ) | async}}</span>

这是一个完整的 StackBlitz 应用程序，可以解决您的问题。

【讨论】：

感谢上面的 sn-p 可以工作。它节省了一些时间