ionic-framework - How to make like dislike Blog Post like facebook instagram in Ionic 4
问题描述
Can anyone help me how to make like dislike for a particular Blog Post If user like any BlogPost heart should be filled else empty what should I do for multiple Blogpost like
BlogPost Array
{
id: "1009"
post_date: "2015-12-10 18:52:32"
post_title: "News Heading Title Blog Data"
tot_like: "1"
tot_comment: "1"
user_like_unlike: ""
// user_like_unlike: "like" or "unlike"
}
Here is Code
Html
<ion-content class="social-cards ion-col">
<ion-card *ngFor="let article of data?.blogdata" color="light">
<img [src]="article.post_img" (click)="singlePageBlog(article)">
<ion-card-content mode="ios" class="ion-text-start">
{{ article.post_title }}
</ion-card-content>
<ion-row padding>
<ion-col align-self-center text-center class="all_center" (click)="likeBox(article.id)" >
<ion-icon [name]="heartType" class="icon_with_right_margin">
</ion-icon>
{{ article.tot_like }}Likes
</ion-col>
</ion-row>
</ion-card>
</ion-content>
Ts code
async likeBox(article) {
this.authService.AddLikeUnlike(this.postLike).subscribe(
(res: any) => {
console.log(res);
if (res.status === true) {
this.tot_like = res.total_like;
this.toastService.presentToast(res.message);
}
else {
this.toastService.presentToast(res.message);
}
},
(error: any) => {
// this.loader.loadingDismiss();
}
);
}
解决方案
试试这个代码它对我有用
在你的 HTML
<ion-col align-self-center text-center class="all_center" (click)="likeBox(article.id,i,article.user_like_unlike)" >
<ion-icon name="heart" class="icon_with_right_margin" *ngIf="article.user_like_unlike == 'like'">
</ion-icon>
<ion-icon *ngIf="article.user_like_unlike == 'unlike' || article.user_like_unlike == ''" name="heart-empty" class="icon_with_right_margin">
</ion-icon>
{{ article.tot_like }} Likes
</ion-col>
TS文件
async likeBox(article, i, like) {
if (this.userDataService.user_id) {
if (like == 'like') {
this.data.blogdata[i].user_like_unlike = 'unlike';
this.data.blogdata[i].tot_like--;
} else {
this.data.blogdata[i].user_like_unlike = 'like';
this.data.blogdata[i].tot_like++;
}
} else {
// this.toastService.presentToast('Please Login');
const alert = await this.alertController.create({
header: 'Please login',
buttons: [
{
text: 'Ok',
handler: () => {
this.router.navigate(['/home/login']);
console.log('Disagree clicked');
}
}
]
});
alert.present();
return;
}
this.postLike.post_id = article;
this.postLike.user_id = this.userDataService.user_id;
if (this.userDataService.user_id) {
this.authService.AddLikeUnlike(this.postLike).subscribe(
(res: any) => {
console.log(res);
if (res.status === true) {
this.tot_like = res.total_like;
this.toastService.presentToast(res.message);
}
else {
this.toastService.presentToast(res.message);
}
},
(error: any) => {
// this.loader.loadingDismiss();
}
);
}
else {
}
}
推荐阅读
- python - Django - 案例为假时过滤
- c# - Sustainsys.Saml2 在普通 Asp.Net Core MVC Web 应用程序中的集成
- c++ - 如何重写我的宏以与 IDE 自动格式配合使用?
- java - 应用程序因使用 com.github.glomadrian.materialanimatedswitch.MaterialAnimatedSwitch 而崩溃
- spacy - 我可以使用 Spacy 进行名词分类吗?
- node.js - 如何检查某些用户是否订阅了频道?(非组)
- python - 你如何在带有选项的python中使用wget
- webpack - 未捕获的 ReferenceError:FUNCTION 未在 webpack JS 包中定义
- c++ - && 对 lambda 表达式有什么好处?
- python - Sqlalchemy Fuzzystrmatch 与 Postgres 扩展