Блог

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

tab1.page.html

     <ion-header>
      <ion-toolbar color="secondary">

        <ion-title style="border: 1px solid #ccc" (click)="scrollToTop()">Pictagram</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content cache-view="false">
      <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
        <ion-refresher-content
          pullingIcon="arrow-dropdown"
          pullingText="Pull to refresh"
          refreshingSpinner="circles"
          refreshingText="Refreshing...">
        </ion-refresher-content>
      </ion-refresher>

      <hr no-margin no-padding>
      <div (swipe)="swipePage($event)">

        <!-- Cards -->
        <ion-card no-padding padding-bottom no-margin class="card"  *ngFor="let getImage of getImages3">

          <ion-row>
            <ion-col col-10>
              <ion-item>
                <ion-avatar item-left>
                  <img *ngIf="getImage.sex == 'male'" src="http://localhost:8000/files/{{getImage.image || 'avatar2.png'}}">
                  <img *ngIf="getImage.sex == 'female'" src="http://localhost:8000/files/{{getImage.image || 'Female-Avatar.jpg'}}">
                </ion-avatar>

                <b style="width: 222px;display: -webkit-box;padding-left: 11px;">{{getImage.name}}</b>

              </ion-item>
            </ion-col>
            <ion-col col-2>

            </ion-col>
          </ion-row>

          <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">
                <ion-icon no-padding [name]="like_btn.icon_name" color="{{ like_btn.color }}" class="icon-space"></ion-icon>
            </button>
          </p>

          <ion-card-content class="padding">
            <p class="like-content">
              <ion-icon class="color" name="heart" ></ion-icon> {{getcounts}} likes
            </p>
            <p><b>{{getImage.title}}</b>{{getImage.info}}</p>

            <ion-note style="font-size: 12px">
              {{getImage.created_at | timeAgo}}

            </ion-note>
          </ion-card-content>

        </ion-card>

      </div>
    </ion-content>
  

В файле tab1.page.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();
      this.getCountOfLikes();
    }
  }

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

}
  

Это общий пример того, как вы можете решить проблему с общей кнопкой.

1. Мы собираемся создать массив, который будет переключать значения. Массив будет размером с массив данных. Внутри мы установим все значения в false.
2. При нажатии на кнопку будет передан индекс массива данных, и это изменит значение массива переключения на true.

HTML

Перебор массива данных с index i

 <ion-item *ngFor="let image of images; index as i">
  <ion-button (click)="toggleIcon(i)">
    <ion-icon name="heart-empty" *ngIf="!iconToggle[i]"></ion-icon> 
    <ion-icon name="heart" *ngIf="iconToggle[i]"></ion-icon> 
  </ion-button>
</ion-item>
  

TS

Если мы получаем данные из subscribe , мы устанавливаем для массива переключения все значения false. При нажатии на кнопку значение того же индекса, что и массив данных, изменяется на true, а другой значок может отображаться в html.

 images = []
iconToggle = [];

this.userService
  .getUserPost()
  .subscribe(res => {
    this.images = res;
    this.setIconToggles();
   });

setIconToggles() {
  let x = 0;
  this.images.forEach(() => {
    this.iconToggle[x] = false;
    x  ;
  });
}

toggleIcon(num: number) {
  if (this.orderToggle[num]) {
    this.orderToggle[num] = false;
  } else {
    this.orderToggle[num] = true;
  }
}