无法显示/列表中的

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

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

希望它可以帮助

Answer 2

这是因为您绑定到所有文件的单一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>