angular - 在服务返回值之前从角度自定义管道获取返回值
问题描述
我正在尝试创建一个自定义管道来获取特定帖子的喜欢,它有一个连接到数据库并提取与特定帖子相关的所有喜欢的服务,但是当我尝试在我的代码中运行时,我在获取之前获得返回值服务响应,我知道我应该等待响应,但不知道该怎么做。请帮我解决这个问题。
网页
<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));
}
}
解决方案
我认为将视图逻辑保留在管道中是一种最佳实践,您可以在 的帮助下处理每个帖子的总点赞数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应用程序,可以解决您的问题。
推荐阅读
- ethereum - 将 ERC20 代币从一个智能合约发送到另一个智能合约的问题
- python - 从 3D numpy 数组绘制 2D 直方图
- c# - 从 .NET Core 中的控制器运行单个后台任务的最简单方法是什么?
- apache-spark - 根据最新记录设置新列值
- c# - How to model a parent-tree design using Entity Framework Core?
- python - Matplotlib - 来自数据框的饼图
- python - 无法使用 python 和子进程打印法语口音
- pdf - 是否有任何可以创建可填写表单字段的命令行 HTML 到 PDF 转换器?
- android - 如何从实时数据库 Firebase 中的条件节点获取元素
- linux - Yocto:在我的源存储库环境中执行 shell 脚本(在下载文件夹中?)