Question

我正在使用＆＃34;用于＆＃34;循环为我的应用程序创建可点击图像列表。当用户点击图像时，＆＃34; src＆＃34;使用Ionics（tap）功能改变图像。我遇到的问题是所有图像都会改变，而不仅仅是被点击的图像。

soundboard.html

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle icon-only>
      <ion-icon name='menu'></ion-icon>
    </button>
    <ion-title>
      {{ title }}
    </ion-title>
  </ion-navbar>
</ion-header>


<ion-content class="color">


<ion-grid>
  <ion-row wrap>
    <ion-col  ng-repeat *ngFor="let sound of sounds" (click)="play(sound)" col-3>
    <ion-card>
    <ion-card-content>
       <img [src]="imageUrl[i]" (tap)="tapEvent($event,i)" />
    </ion-card-content>
    <ion-item>     
        <h2 wrap>{{ sound.title }}</h2>            
    </ion-item>
  </ion-card>     

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

</ion-grid>
</ion-content>

soundboard.ts

    import {Component} from '@angular/core';
import {Http} from '@angular/http';


@Component({
  templateUrl: 'build/pages/soundboard/soundboard.html'
})
export class SoundboardPage {

  /* EDIT THESE */
   title: string = "Text";
  base_url: string = "http://swiftylabs.com/Sounds-App";
  sounds_url: string = "/Erotico";
  randomColours: boolean = false;


  /* Icon Colours */
  /* EDIT THESE */
  colour: string = "black";
  colours: Array<string> = [
    "red",
    "blue",
    "green",
    "purple",
    "cyan"
  ];

  sounds: any = [];
  media: any = null;
  imageUrl: any = [];
  constructor(public http: Http) {
    this.http.get(this.base_url + this.sounds_url)
      .subscribe(
        data => {
          /* Create a webpage out of the data from the http.get request */
          let content: string = data.text();
          let doc: any = document.createElement("html");
          doc.innerHTML = content;

          /* Extract all "a" tags from it */
          let links: any = doc.getElementsByTagName("a");

          /* Loop through them, saving their title and sound file */
          for(let link of links) {            
            let filename = link.getAttribute("href")

            if(filename.startsWith("/")) {
              filename = this.base_url + filename
            }
            else {
              filename = this.base_url + this.sounds_url + "/" + filename
            }
            this.sounds.push({
              title: link.innerHTML,
              file: filename,

            });
          }
        },
        err => console.error('There was an error: ' + err),
        () => console.log('Get request completed')
       );


  }

  /* returns an ngStyle-compliant object containing either a random colour
   * or a specific colour, depending on set variables
   */
  colourStyle() {
    if(this.randomColours) {
      let colour: string = this.colours[Math.floor(Math.random() * this.colours.length)];
      return {color: colour};
    }
    return {color: this.colour};
  }

  /* Plays a sound, pausing other playing sounds if necessary */
  play(sound) {        
    console.log(sound)
    if(this.media) {      
      this.media.pause();
    }
    this.media = new Audio(sound.file);    
    this.media.load();
    this.media.play();
  }



tapEvent(e,i) {
  //this.imageUrl[i] = 'http://swiftylabs.com/Sounds-App/button-Clicked.png';  
  setTimeout(() => this.imageUrl[i] = 'http://swiftylabs.com/Sounds-App/button-Unclicked.png', 1000);
 }
}

Answer 1

如果您的图片位于forloop中，则需要拥有数组图片网址。你在这里基本上只有一个imageurl元素。点击即可更改该变量。因此它会重置循环中的所有项目（相同的图像）。

 <ion-card-content>
  <img [src]="imageUrl[i]" (tap)="tapEvent($event,i)" />
 </ion-card-content>

在组件中，

tapEvent(e,i) {
  //this.imageUrl = 'http://swiftylabs.com/Sounds-App/button-Clicked.png';  
  setTimeout(() => this.imageUrl[i] = 'http://swiftylabs.com/Sounds-App/button-Unclicked.png', 1000);
 }

使用（点击）更改Ionic 2 + Angular 2中的单个图像src

1 个答案: