Блог

Я создаю функциональность «нравится» и «не нравится» в приложении ionic, когда пользователь, которому нравится, затем хочет показать значок сердца, а когда пользователю не нравится, затем хочет показать пустой значок сердца.Когда сообщение нравится, отображается значок, но при обновлении страницы отображается значок с пустыми лайками.Пожалуйста, помогите мне, как решить эту проблему в ionic….

tab1.page.html

       <div>
        <img src="{{getImage.image}}" (click)="tapPhotoLike(getImage.id)" (click)="toggleIcon(getImage.id)">
      </div>

      <p no-margin no-padding>
        <button clear ion-button icon-only class="like-btn">
          <!-- <ion-icon no-padding name="like_btn.icon_name" color="{{ like_btn.color }}" class="icon-space"></ion-icon> -->
          <ion-icon name="heart-empty" *ngIf="!iconToggle[getImage.id]" color="{{ like_btn.color }}"></ion-icon> 
          <ion-icon name="heart" *ngIf="iconToggle[getImage.id]" color="{{ like_btn.color }}"></ion-icon> 
        </button>
      </p>
  

tab1.page.ts

 import { Component, OnInit } from '@angular/core';
import { UserService } from '../user.service';
import { User } from '../user';
import { first } from 'rxjs/operators';
import { Storage } from '@ionic/storage';
import { ToastController } from '@ionic/angular';
import { LoadingController, NavController } from '@ionic/angular';
@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})

export class Tab1Page implements OnInit {
  num
  getImages: User[] = [];
  getImages2: User[] = [];
  getImages3 = [];
  getcounts;
  countLikes
  counts
  unlikes
  likesID
  iconToggle = [];
  like_btn = {
    color: 'danger',
    icon_name: 'heart-empty'
  };

  public tap: number = 0;
  public status: false;
  constructor(private userService: UserService,
    public toastController: ToastController,
    private storage: Storage,
    public navCtrl: NavController,
    public loadingController: LoadingController) {

  }

  doRefresh(event) {
    this.userPost();
    setTimeout(() => {
      event.target.complete();
    }, 2000);
  }

  ngOnInit() {
    this.userPost();
    //this.getCountOfLikes();
  }

  async userPost() {
    const loading = await this.loadingController.create({
      message: 'Please wait...',
      spinner: 'crescent',
      duration: 2000
    });
    await loading.present();
    this.userService.getUserPost().pipe(first()).subscribe(getImages => {
      this.getImages3 = getImages;
      loading.dismiss();
    });
  }

  likeButton() {
    const detail_id = this.userService.getCurrentIdpostId();
    this.storage.get('userId').then((val) => {
      if (val) {
        let user_id = val
        this.userService.userPostLikes(user_id, detail_id).pipe(first()).subscribe(
          async data => {
            this.iconToggle[this.num] = true;
            if (data['status'] === 'you have already liked this post') {
              const toast = await this.toastController.create({
                message: 'you have already liked this post before.',
                duration: 2000
              });
              toast.present();
            }
            this.userPost();
          }
        );
      }
    });
  }

  tapPhotoLike($detail_id, num) {

    this.userService.setCurrentIdpostId($detail_id);
    this.tap  ;
    setTimeout(() => {
      if (this.tap == 1) {
        this.tap = 0;
        //this.unlikePost();
      } if (this.tap > 1) {
        this.tap = 0;

      }
    }, 250);
  }
  setIconToggles() {
    let x = 0;
    this.getImages3.forEach(() => {
      this.iconToggle[x] = false;
      x  ;
    });
  }
  toggleIcon(num) {
    if (this.iconToggle[num]) {

      this.iconToggle[num] = false;
      this.unlikePost();
    } else {

      this.iconToggle[num] = true;
      this.likeButton();
    }
  }

  ionViewWillEnter() {
    this.userPost();

  }

  unlikePost() {
    let detail_id = this.userService.getCurrentIdpostId();
    this.storage.get('userId').then((val) => {
      if (val) {
        let user_id = val;
        this.userService.unLikes(user_id, detail_id).subscribe(async dislikes => {
          this.unlikes = dislikes;
          this.iconToggle[this.num] = false;
          this.userPost();
        })
      }
    });
  }

}
  

Как управлять значком, я вставляю статус «нравится» и «не нравится» в database..In этот код, как управлять статусом, пожалуйста, помогите мне.