Html 播放、暂停、恢复&；躲藏

在我的页面中，我有播放、暂停、恢复和停止图标。当我点击播放图标时，暂停和停止图标也会显示出来。当我点击暂停图标时，我想显示恢复和停止图标。这是我的代码，请任何人帮助我。多谢各位

HTML代码

---

您应该为不同的按钮设置单独的变量，而不是让它们都依赖于playDiv。创建名为resumeDiv和stopDiv以及pauseDiv的新布尔变量。将每个div上的*ngIf设置为这些新变量。然后，更改openPause（）和openPlay（）以将要显示的设置为true，将要隐藏的设置为false

您应该为不同的按钮设置单独的变量，而不是让它们都依赖于playDiv。创建名为resumeDiv和stopDiv以及pauseDiv的新布尔变量。将每个div上的*ngIf设置为这些新变量。然后，更改openPause（）和openPlay（）以将要显示的设置为true，将要隐藏的设置为false

 <div id="checkDiv">
        <span mdTooltipPosition="below" mdTooltip="CheckIn">
        <md-icon svgIcon="play" style="color: #efefef;cursor: pointer;height: 15px;width: 15px;" (click)='openPause()' [hidden]='playDiv'></md-icon>
        </span>
        <span mdTooltipPosition="below" mdTooltip="pause">
        <md-icon svgIcon="pause" style="color: #efefef;cursor: pointer;height: 15px;width: 15px;"  *ngIf="playDiv" (click)='openPlay()' > </md-icon>
        </span>
        <span mdTooltipPosition="below" mdTooltip="resume">
         <md-icon svgIcon="play" style="color: #efefef;cursor: pointer;height: 15px;width: 15px;"  *ngIf="playDiv"  [hidden]='playDiv' (click)='openPause()' ></md-icon>
        </span>
        <span mdTooltipPosition="below" mdTooltip="CheckOut">
         <md-icon svgIcon="stop" style="color: #efefef;cursor: pointer;height: 15px;width: 15px;" *ngIf="playDiv" (click)='openPlay()'></md-icon>
        </span>

    public playDiv:boolean = false;
openPause() {
  this.playDiv = true;
}

openPlay() {
  this.playDiv = false;
}