無法顯示/列表中的

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>