Question

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

以下是我的最新努力。请帮助我。

jq

Answer 1

使用ngClass

您可以使用ngClass来更改显示的按钮图标，如下所示：

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

      <span>
        <mat-icon  
        class="md-48"
        [ngClass]="{'play-button' : track != selectedTrack,
            'pause-button' : track === selectedTrack}"
        (click)="toggle(track)">Some output here</mat-icon>

      </span>
</mat-card>

使用ngIf

您可能可以使用ngIf（docs）来显示/隐藏按钮，尽管Chris指出，这会为列表中的每个轨道创建两个元素，并且可能导致性能问题是一个非常庞大的清单。

<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"
        *ngIf="track != selectedTrack"
        (click)="toggle(track)">play_circle_outline</mat-icon>

        <mat-icon 
        class="pause-button md-48" 
        *ngIf="track === selectedTrack"
        (click)="toggle(track)">pause_circle_outline</mat-icon>  

      </span>
</mat-card>

当您的selectedTrack与曲目不相等时，显示播放按钮，如果在同一曲目中，则显示暂停按钮。 / p>

您也可以使用 if-else-block （来自文档）：

<div *ngIf="condition; else elseBlock">Content to render when condition is true.</div>
<ng-template #elseBlock>Content to render when condition is false.</ng-template>

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

1 个答案: