首页 文章

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

提问于
浏览 次
0

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

<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 .

Problem ：每次单击列表中的某个项目时，列表中的每个项目都会更改它的图标 . 那没有意义 . 只有单击项目中的按钮才会更改 .

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

Note ：我知道我可以点击该项目 . 可以看到一个例子here . 但是在我的数据模型中没有字段 playButtonIcon 因为它只是一个技术问题，因此我需要另一种方法来访问所点击项目的按钮 .

angularjs typescript ionic-framework ionic3

1 回答

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

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

    回复于

相关问题