Ionic 3 - 带有引用单击项目的按钮的列表视图

Posted 2023-03-22

【中文标题】Ionic 3 - 带有引用单击项目的按钮的列表视图

【英文标题】：Ionic 3 - list view with buttons referencing the clicked item

【发布时间】：2018-03-07 12:02:05

【问题描述】：

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

  <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，因为它只是一个技术问题，因此我需要另一种方法来访问单击项目的按钮。

【参考方案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>

组件.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; 

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