css - 以角度显示播放/暂停按钮

问题描述

我想在角度 7 的曲目列表上实现播放和暂停按钮的显示/隐藏功能。我最初使用角度动画使此功能部分工作，但我的方法将更改列表中所有按钮的状态，而不是单个项目。我也尝试过使用 ngClass，但似乎无法正常工作。

以下是我最近的努力。请帮我。

 <mat-card class="track-box" *ngFor="let track of tracks" cdkDrag>
      <div class="custom-placeholder" *cdkDragPlaceholder></div>

      <span>

        <mat-icon  
        class="play-button md-48"
        [ngClass]="{'show' : track === selectedTrack}"
        (click)="toggle(track)"
        > play_circle_outline</mat-icon>

        <mat-icon 
        class="pause-button md-48" 
        [class.selected2]="track === selectedTrack"
        (click)="toggle(track)"
        >pause_circle_outline</mat-icon>  

      </span>

标签： cssangulartypescript

根据我对他的回答的评论，我不得不不同意@Tomato 的回答。

但是，我建议使用类似于NgClassngIf. 但这就是问题所在。说到ngIf，您正在创建 2 个组件，隐藏一个并显示另一个，并一遍又一遍地执行该操作。这不是最佳代码实践。

但是，在的情况下ngClass，您正在为同一个组件创建一个组件和 2 个单独的 SCSS 类。每当满足某个条件时，就会应用一个 SCSS 类，依此类推。

HTML 文件

  <span>
    <button
    class="play-pause-button"
    [ngClass]="toggle(track)"></button>
  </span>

TS 文件

export class Component {

    let isPlay = false;

    public toggle(track: string) {
        this.isPlay = !this.isPlay;
        this.isPlay ? return 'play-button'; : return 'pause-button'
    }

}

这样，该toggle()函数将SCSS根据按钮本身的当前状态返回一个类名。

css - 以角度显示播放/暂停按钮

问题描述

解决方案

推荐阅读