在离子中，当双击单个图像但心形图标显示我所有图像时都显示为“喜欢”图标

Question

我正在双击“点赞”按钮。当我单击图像时，所有图像均显示为图标。如何只为喜欢的图像设置图标，请帮帮我...

tab1.page.html

          <div>
            <img src="http://localhost:8000/files/{{getImage.image || 'avatar2.png'}}" (click)="tapPhotoLike(getImage.id)">
          </div>


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

下面是我的.ts文件，其中定义了双击点赞按钮。请帮助我如何管理此图标问题.....

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 } from '@ionic/angular';
@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})

export class Tab1Page implements OnInit {

  getImages: User[] = [];
  getImages2: User[] = [];
  getImages3;
  getcounts;
  countLikes
  counts
  unlikes
  public like_btn = {
    color: 'danger',
    icon_name: 'heart-empty'
  };

  public tap: number = 0;

  constructor(private userService: UserService,
    public toastController: ToastController,
    private storage: Storage,
    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;
      //console.log(this.getImages3);
      loading.dismiss();
    });
  }

  likeButton() {
    const detail_id = this.userService.getCurrentIdpostId();
    if (this.like_btn.icon_name === 'heart-empty') {
      this.like_btn.icon_name = 'heart';
      this.like_btn.color = 'danger';

      this.storage.get('userId').then((val) => {
        if (val) {
          this.userService.userPostLikes(val, detail_id).pipe(first()).subscribe(
            async data => {
              //console.log(data);
              if (data['status'] === 'you have already liked this post') {
                const toast = await this.toastController.create({
                  message: 'you have already liked this post',
                  duration: 2000
                });
                toast.present();
              }
              this.getCountOfLikes();

            }
          );
        }
      });

    }
    else {
      this.like_btn.icon_name = 'heart-empty';
      this.like_btn.color = 'danger';
      this.unlikePost();

    }
  }

  tapPhotoLike($detail_id) {

    this.userService.setCurrentIdpostId($detail_id);
    this.tap++;
    setTimeout(() => {
      if (this.tap == 1) {
        this.tap = 0;
        //alert('Single Tap');
      } if (this.tap > 1) {
        this.tap = 0;

        this.likeButton();

        //alert('Double Tap');
      }
    }, 250);
  }
  ionViewWillEnter() {
    this.userPost();
    this.getCountOfLikes();

  }
  getCountOfLikes() {

    this.userService.getCountId().pipe(first()).subscribe(likes => {
      this.counts = likes;

      for (var k in this.counts) {

        var i = this.counts[k].detail_id;

      }
      this.userService.getUserPostlikes(i).pipe(first()).subscribe(getlikes => {
        this.getcounts = getlikes;
      });
    });

  }
  unlikePost() {
    let detail_id = this.userService.getCurrentIdpostId();
    this.storage.get('userId').then((val) => {
      if (val) {
        this.userService.unLikes(val, detail_id).subscribe(async dislikes => {
          this.unlikes = dislikes;
          this.getCountOfLikes();
        })
      }
    });
  }
  likeIcon(){

    this.unlikePost();

  }
}

Answer 1

您正在对所有图像使用1个变量（公共like_btn）。 尝试使每个图像。 使用模型可以很好。 我将使用模型作为图像。

// image.model.ts

export class ImageModel{
  imagePath: string;
  isLiked: boolean;
}

并根据模型将数据表单API插入变量

// tab1.page.ts

import { ImageModel } from './image.model';

export class Tab1Page implements OnInit {

  images: ImageModel[] = [];

  // then use model where ever you get an image

}

您可以检查html是否喜欢图片

// tab1.page.html

<ion-icon no-padding
   [name]="like_btn.icon_name" 
   color="{{ this.model.isLiked ? like_btn.color : 'white'}}" 
   class="icon-space" *ngIf="getImage.id">
</ion-icon>