（タップ）を使用してIonic 2 + Angular 2の単一画像srcを変更してください

Question

"for"ループを使用して、アプリ用のクリック可能な画像のリストを作成しています。ユーザーが画像をタップすると、Ionics（タップ）機能を使用して画像の「src」が変化します。私が抱えている問題は、クリックされた画像だけでなく、すべての画像が変化することです。

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内にある場合は、画像のURLの配列を持っている必要があります。 基本的に1つの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); 
}