イオン3 - クリックされたアイテム

Question

を参照ボタンを使ってリストビューIは、ボタンのレイアウトを持つ単純なリストがあります：

<ion-list inset *ngFor="let audio of event.audios; let i = index"> 
     <ion-item> 

     <div class="item-text-center item-text-wrap"> {{audio.fileName}} </div> 

     <ion-buttons end> 
      <button end ion-button icon-only color="primary" (click)="playAudio(audio)"> 
      <ion-icon name="{{playButtonIcon}}"></ion-icon> 
      </button> 
      <button end ion-button icon-only color="primary" (click)="deleteAudio(audio)"> 
      <ion-icon name="close"></ion-icon> 
      </button> 
     </ion-buttons> 

     </ion-item> 
    </ion-list> 

注リスト内のボタンがクリックされるたびに変化する可変playButtonIconがあることを。

問題：私はリストにリスト内のすべての項目を項目をクリックするたびに、それのアイコンを変更します。それは意味をなさない。クリックした項目のボタンのみが変更されます。

質問：クリックしたアイテムのボタンアイコンを変更するにはどうすればよいですか？これまでの私の考えでは、リスト内の各項目に対して変数playButtonIconが停止から再生に変わるような余分な配列を持たせることでした。しかし、それは行く方法のように見えません。そのケースの公式パターンはありますか？

注：：アイテムをクリックすることができます。例はhereです。しかし、私のデータモデルではフィールドplayButtonIconは技術的なものであるため、クリックされたアイテムのボタンにアクセスする別の方法が必要なため、フィールドはありません。

Answer 1

は、なぜあなたはこの

view.html

 <button end ion-button icon-only color="primary" (click)="playAudio(audio)"> 
    <ion-icon name="{{playButtonIcon}}" *ngIf="typeOf audio.isPlaying == 'undefined'">{{Playbuttonicon}}</ion-icon> 
    <ion-icon name="{{pauseButtonIcon}}" *ngIf="typeOf audio.isPlaying != 'undefined'">{{PauseButtonIcon}}</ion-icon> 
</button> 

component.ts

playAudio(audio){ 
//get the index of the current audio in the array 
let idx = this.audios.indexOf(audio); 
//make a new property called isPlaying and assign a boolean true 
this.audios[idx]["isPlaying"] = true; 
} 

か、他の再ループ配列のようなものを試してみてはいけませんaを追加するアイコンと呼ばれる追加のプロパティをクリックし、アイコンを変更します。