Question

我有一个带按钮布局的简单列表：

typedef int array[3];

请注意，每次单击列表中的按钮时，都会更改一个变量playButtonIcon。

问题：每次单击列表中的项目列表中的每个项都会更改它的图标。那没有意义。只有单击项目中的按钮才会更改。

问题：如何更改点击项目的按钮图标？直到现在我的想法是有一个额外的数组，包含列表中每个项目的变量<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>，从停止变为播放。但这似乎不太可行。那个案子有官方模式吗？

注意：我知道我可以点击该项目。可以看到一个例子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; 
}

或者否则重新循环数组并添加一个名为icon的额外属性，然后单击更改图标。

Ionic 3 - 列表视图，其中的按钮引用了单击的项目

1 个答案: