I need assistance with modifying the button icon in a list layout:
<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>
The issue is that when I click on an item, every button in the list changes its icon. This behavior is not desired, as only the clicked item's icon should change.
How can I modify the button icon of the clicked item exclusively? My initial idea was to use an additional array to keep track of the playButtonIcon variable for each item. However, this approach does not seem optimal. Is there a recommended solution for this scenario?
Please note that while I can identify the clicked item, my data model lacks a playButtonIcon field. Therefore, I require an alternative method to access and update the button of the clicked item.