启用alist

Question

我创建了一个媒体播放功能，我可以回放我创建的音频文件，我有一个列表，其中包含文件名和两个按钮，将按ngIf状态显示，只有一个按钮将是显示在列表中。 在此列表中，当我单击播放按钮（现在停止按钮变为可见状态）时，我希望启用该项目按钮，并且应禁用该列表中的其他按钮。有人可以帮我吗

 <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

我建议您使用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;
}