离子载玻片上每个按钮的点击事件

Question

我有各种幻灯片，每张幻灯片都有点赞和评论按钮，当我单击特定的幻灯片之类的按钮然后按钮图像发生变化或者它显示像你和 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);
  }

Answer 1

您正在为数组的所有项目使用相同的变量 ionicNamedColor。

您可以尝试在机器人对象 ionicNamedColor 中再创建一个变量并更改特定索引对象颜色的颜色。

例如：*ngIf="robot.ionicNamedColor == false"

Answer 2

您可以通过 .ts 为您的 _robots JSON 对象添加一个新密钥，这里是提示：

在您的 .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>

在您的 .ts 文件中

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

希望对您有所帮助。

Answer 3

在 Ionic 4 中实现 Angular 8 项目：

HTML:

 <ion-slides pager="true" #slides>
    <ion-slide>
        <div>Slide page 1</div>
    </ion-slide>
    <ion-slide>
        <div>Slide page 2</div>
    </ion-slide>
    <ion-slide>
        <div>Slide page 3</div>
    </ion-slide>
 </ion-slides>

打字稿：

 @ViewChild('slides', { static: true }) slides: IonSlides;

ngOnInit() {
    this.slides.ionSlidesDidLoad.subscribe((e) => {
        var swiperElements: HTMLCollection =
            this.elem.nativeElement.querySelectorAll(".swiper-pagination-bullet");
        var self = this;
        Array.from(swiperElements).forEach(function(element) {
            element.addEventListener("click", function() {
                self.goToSliderIndex(this, self);
            });
        });
    })
}

goToSliderIndex(child, self) {
    var parent = child.parentNode;
    var bulletIndex = Array.prototype.indexOf.call(parent.children, child);
    this.slides.slideTo(bulletIndex, 2000);
}

离子载玻片上每个按钮的点击事件

Click event on each button on ion-slides

typescript

ionic-framework

ionic2

在您的 .html 文件中

在您的 .ts 文件中