如何在 Ionic 4 中制作像 facebook instagram 这样的不喜欢的博客文章

Question

谁能帮我如何不喜欢特定的博客文章 如果用户喜欢任何博客帖子的心应该填空，否则为空 我应该为多个博客文章做什么，例如

博客文章数组

{
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"
}

这是代码

目录

<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代码

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();
}
);
}

Answer 1

试试这段代码，它对我有用

在你的 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 {
}
}