如何在 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"
        }

这是代码

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>

代码

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 {

    }
  }