alist内のボタンを無効にする

Question

私が作成したオーディオファイルを再生できるメディア再生機能を作成しました。ファイル名とngIfステータスで表示される2つのボタンを持つリストを持っています、リストには1つのボタンしか表示されません。 このリストで再生ボタンをクリックすると（現在停止ボタンが表示された状態になります）、そのアイテムボタンを有効にし、そのリスト内の他のボタンを無効にします。誰かが私に

<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.'); 
     } 
    } 

Answer 1

を助けることができる私は後者がdisabled属性を持っていないとして、あなたはicon-only button代わりのion-iconを使用することをお勧め。

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