Question

我有一个音频文件列表，每个文件上都有播放和暂停按钮，我使用ngIf来显示或隐藏该按钮。但如果我点击该按钮，它会改变该列表中所有按钮的状态

 <button  class="lowerCase" ion-button (click)="ListAudioFiles()">Audio list</button>

 <ion-list>
        <ion-item *ngFor="let file of MyAudioFiles" >
            <ion-row>
                <ion-col width-20 >  
                    <ion-icon *ngIf="status" name="play" (click)="startPlayback(file)" ></ion-icon>
                    <ion-icon *ngIf="!status" name="square" (click)="stopPlayback(file)" ></ion-icon>
                </ion-col>
                <ion-col width-80>{{file.name}}</ion-col>
            </ion-row>
        </ion-item>
    </ion-list>

import { Component } from '@angular/core';
declare var cordova: any;

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
MyAudioFiles: any[];
constructor() {     }


/*MYfolder represents a folder inside internal memory of my mobile, allFiles gets the collection of all files inside that specific folder, you can think like we have a list of music files inside MYfolder*/


ListAudioFiles(){
        File.listDir(cordova.file.externalRootDirectory, 'MYfolder /Audios').then(
          (allFiles) => {
            // do something
            console.log("we have audio files", allFiles);
            this.MyAudioFiles = allFiles;
          }
        ).catch(
          (err) => {
            // do something
            console.log("file listing err", err)
          });
    }

我需要的是，如果我点击第一个播放按钮，那个按钮应该单独更改为停止，而不是所有按钮

Answer 1

这是因为你绑定了所有文件的SINGLE status属性。

您是否可以设置模型，以便每个文件都有自己的status属性？

例如：

this.MyAudioFiles = [
  { name: 'file1.mp3', status: false },
  { name: 'file2.mp3', status: false },
  // ...
];

或者，如果要将状态与文件名分开存储，可以为其创建新属性：

// This is a new property to store the statuses.
// Each status is keyed by filename so it can be accessed easily.
this.statuses = {
  { 'file1.mp3': false },
  { 'file2.mp3': false },
  // ...
};

在模板中：

<!-- Option #1 - Storing the statuses along with the filenames -->
<ion-item *ngFor="let file of MyAudioFiles">
  <ion-icon *ngIf="file.status" name="play" (click)="startPlayback(file.name)" ></ion-icon>
</ion-item>

<!-- Option #2 - Storing the statuses in a separate property -->
<ion-item *ngFor="let file of MyAudioFiles">
  <ion-icon *ngIf="statuses[file]" name="play" (click)="startPlayback(file)" ></ion-icon>
</ion-item>

Answer 2

根据AngularFrance的回答和评论，您不必为文件“分配”状态，您可以将文件保存在对象中。

File.listDir(cordova.file.externalRootDirectory, 'Vanan/Audios')方法的响应如何？ Ir可能返回一个对象或数组，因为你可以在其中使用*ngFor。

所以你可以这样做：

File.listDir(cordova.file.externalRootDirectory, 'Vanan/Audios').then(
  (allFiles) => {
  // do something
    for (var i = 0; i < allFiles.length; i++){ // iterate through your object and save the audio file along with an status
      this.MyAudioFiles.push({
       audio: allFiles[i],
       status: false
      });
    }
  });

并在你的HTML中

<ion-list>
    <ion-item *ngFor="let file of MyAudioFiles; let i = index"> //get the index of the object's current row
        <ion-row>
            <ion-col width-20 >  
                <ion-icon *ngIf="file.status" name="play" (click)="startPlayback(file.audio, i)" ></ion-icon>
                <ion-icon *ngIf="!file.status" name="square" (click)="stopPlayback(file.audio, i)" ></ion-icon>
            </ion-col>
            <ion-col width-80>{{file.name}}</ion-col>
        </ion-row>
    </ion-item>
</ion-list>

以及您的startPlayback/stopPlayback方法

startPlayback(audio, i){
  this.MyAudioFiles[i].status = true;
  // play audio
}
stopPlayback(audio, i){
  this.MyAudioFiles[i].status = false;
  // stop audio
}

希望有所帮助

无法显示/隐藏列表中的单个按钮

2 个答案: