2017-03-14 70 views
0

我創建了一個媒體播放功能,可以播放我創建的音頻文件,我有一個列表,其中包含文件名和兩個按鈕,這些按鈕將通過ngIf狀態,列表中只會顯示一個按鈕。 在此列表中,當我單擊播放按鈕(現在停止按鈕變爲可見狀態)時,我希望啓用該項目按鈕,並且應該禁用該列表中的其他按鈕。可能有人幫助我啓用在alist中禁用按鈕

<ion-content padding class="has-header"> 
    <ion-list> 
     <ion-grid> 
      <ion-row *ngFor="let file of MyAudioFiles let i = index "> 
       <ion-col width-60 style="padding-top: 6px;"> 
        {{file.audio.name}} 
       </ion-col> 
       <ion-col width-20 > 
        <ion-icon style="padding-top: 9px;" *ngIf="!file.status" name="play" (click)="startPlayback(file.audio, i)"></ion-icon> 
        <ion-icon style="padding-top: 9px;" *ngIf="file.status" name="square" (click)="stopPlayback(file.audio, i)"></ion-icon> 
       </ion-col>    
      </ion-row> 
     </ion-grid> 
    </ion-list> 
</ion-content> 

startPlayback(audio, i) { 
     try { 

      console.log("start playback file name and index", audio.name, i); 
      this.MyAudioFiles[i].status = true; 

      var pathalone = audio.nativeURL; 
      this.file = new MediaPlugin(pathalone, (status) => { 
       console.log("playback status", status); 
       this.playbackStatus = status 
       if (status == 2) { 
        console.log("MEDIA RUNING") 
       } 
       if (status == 4) { 
        console.log("MEDIA STOPPED") 
        this.MyAudioFiles[i].status = false; 
       } 
      }); 
      console.log("play back file getDuration", this.file.getDuration()); 
      this.file.play(); 
      console.log("playbackStatus", this.playbackStatus); 
     } 
     catch (e) { 
      this.showAlert('Could not play recording.'); 
     } 
    } 
+0

其他按鈕意味着其他'play'按鈕? –

+0

我有一個5項目列表,每個項目都有一個播放按鈕,如果點擊它改變停止按鈕。如果第三個按鈕被點擊1,2,4,5按鈕必須被禁用 –

回答

0

我建議你使用icon-only button代替ion-icon因爲後者不具有disabled屬性。

<button ion-button style="padding-top: 9px;" *ngIf="!file.status" (click)="startPlayback(file.audio, i)" clear icon-only [disabled]="isPlaying()"> 
    <ion-icon name="play"></ion-icon> 
</button> 

您可以定義isPlaying()基於媒體是否正在播放一個文件或不回。

isPlaying(){ 
    return this.MyAudioFiles.filter(file=>file.status==true).length > 0; 
} 
+0

我是否必須創建一個新函數isPlaying()我應該添加什麼 –

+0

檢查是否有文件正在播放..根據狀態過濾文件列表 –

+0

isPlaying(){document.getElementById(「play」)。disabled; }這是使用document.getElementId –