離子3 - 與按鈕引用單擊項目

我有一個簡單的列表的按鈕佈局列表視圖：離子3 - 與按鈕引用單擊項目

<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，因爲它只是一個技術性的東西，因此我需要另一種方式來訪問點擊項目的按鈕。

來源

2017-09-26 jublikon

你爲什麼不嘗試這樣

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

否則重新循環數組和添加一個n稱爲圖標的額外屬性，點擊更改圖標。

來源

2017-09-26 11:03:19

離子3 - 與按鈕引用單擊項目

回答

相關問題