Событие нажатия на каждую кнопку на ионных слайдах - PullRequest
Новая
       1

Событие нажатия на каждую кнопку на ионных слайдах

0 голосов
/ 03 октября 2018

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

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

Мой код ниже

.html 

<ion-slides #slider (ionDidChange)="SlideChanged()" [options]="_sliderOptions" id="ionSlider" class="main-slider">
    <ion-slide #slide *ngFor="let robot of _robots; let i = index">
      <ion-grid class="content-info-item">
          <img [src]="sanitizer.bypassSecurityTrustResourceUrl(photoPicArray[i])" class="postimage" />
        <div class="content-info-content">
          <p class="posttime">{{robot.Created | date:'medium'}}</p>
          <h1 class="GuardianEgyp-Regular-Web heading-title" (click)="goToLongStory(i)">{{robot.Title}}</h1>
          <p class="shortstory GuardianEgyp-Light-Web" (click)="goToLongStory(i)">{{robot.SortStory}}</p>
        </div>
        <div class="like-info-icon" *ngIf="ionicNamedColor == false">
            <button (click)="toggleNamedColor(robot.Id,i)" color="primary" block>
                <img src="assets/imgs/like.png">
           </button>
        </div>
        <div class="like-info-content GuardianEgyp-Light-Web">
          <p item-end><span *ngIf="ionicNamedColor == true" >You and</span><span>{{robot.TotalLikesId}}</span> Likes</p>
      </div>

      <div class="like-info-icon-box">
          <div class="like-info-icon">
            <img class="" width="24" src="assets/imgs/comments1.png" alt="longstory" title="View More">
          </div>
          <div class="like-info-content GuardianEgyp-Light-Web">
            <p>
              <span>{{robot.TotlaCommentsId}}</span> Comments</p>
          </div>
        </div>
      </ion-grid>

.ts файл 

public ionicNamedColor: boolean = false;
  public likeArray: any[] = [];


    public toggleNamedColor(articleID: string, indexID: string): void {
        if (this.ionicNamedColor == false) {
          this.ionicNamedColor = true;
        }
        else {
          this.ionicNamedColor = false;
        }
}

SlideChanged() {
    let currentSlide = this.slider.getActiveIndex();
    let slideElements = this.slides.toArray();

    let targetSlide = slideElements[currentSlide];
    console.log(targetSlide);
  }

Ответы [ 2 ]

0 голосов
/ 03 октября 2018

Вы можете добавить новый ключ к вашему объекту _SON _robots из .ts, Вот подсказки:

в вашем .html файле 

<ion-slides #slider (ionDidChange)="SlideChanged()" [options]="_sliderOptions" id="ionSlider" class="main-slider">
    <ion-slide #slide *ngFor="let robot of _robots; let i = index">
      <ion-grid class="content-info-item">
          <img [src]="sanitizer.bypassSecurityTrustResourceUrl(photoPicArray[i])" class="postimage" />
        <div class="content-info-content">
          <p class="posttime">{{robot.Created | date:'medium'}}</p>
          <h1 class="GuardianEgyp-Regular-Web heading-title" (click)="goToLongStory(i)">{{robot.Title}}</h1>
          <p class="shortstory GuardianEgyp-Light-Web" (click)="goToLongStory(i)">{{robot.SortStory}}</p>
        </div>
        <div class="like-info-icon" *ngIf="robot.isLiked == false">
            <button (click)="toggleNamedColor(robot.Id, i)" color="primary" block>
                <img src="assets/imgs/like.png">
           </button>
        </div>
        <div class="like-info-content GuardianEgyp-Light-Web">
          <p item-end><span *ngIf="robot.isLiked == true" >You and</span><span>{{robot.TotalLikesId}}</span> Likes</p>
      </div>

      <div class="like-info-icon-box">
          <div class="like-info-icon">
            <img class="" width="24" src="assets/imgs/comments1.png" alt="longstory" title="View More">
          </div>
          <div class="like-info-content GuardianEgyp-Light-Web">
            <p>
              <span>{{robot.TotlaCommentsId}}</span> Comments</p>
          </div>
        </div>
      </ion-grid>

в вашем .tsfile 

let _robots = [
  {
    Id : "1",
    Title: "your title...",
    SortStory: "SortStory...",
    ...
  },{
    Id : "2",
    Title: "your title...",
    SortStory: "SortStory...",
  }
]

function addKeyValue(obj, key, data){
  obj[key] = data;
}


_robots.map(function(person) {
  return addKeyValue(person, 'isLiked', 'false');
});


public toggleNamedColor(indexID): void {
    _robots[indexID].isLiked = true;
}

Надеюсь, это полезно для вас.

0 голосов
/ 03 октября 2018

Вы используете одну и ту же переменную ionicNamedColor для всех элементов массива.

Вы можете попробовать создать еще одну переменную внутри объекта-робота ionicNamedColor и изменить цвет определенного цвета объекта индекса.

Пример: * ngIf = "robot.ionicNamedColor == false"

...