0

我有带有材料表的 Angular 7：

<mat-table #table [dataSource]="dataSource" matSort>

    <ng-container matColumnDef="Extension"> 
        <mat-header-cell *matHeaderCellDef (click)="sortData('agentExtn')" class="pointer" [ngClass]="getSortClass('agentExtn')" id="ExtnHeader" >
        {{ ExtnHeader | translate }} <div></div >
        </mat-header-cell> <mat-cell *matCellDef="let element" class="ExtnCol"> {{ element.Extn }} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="Play"> 
        <mat-header-cell *matHeaderCellDef>{{ 'MAIN.PLAY' | translate }}</mat-header-cell> 
        <mat-cell *matCellDef="let element"> 
            <button id="play" class="float-right icon-link" mat-icon-button matTooltip="{{ 'MAIN.PLAY' | translate }}" (click)="    $event.stopPropagation(); playRecord(element.recordId)" >    
                <i class="fa fa-play" aria-hidden="true"></i> 
            </button>
        </mat-cell> 
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>

    <mat-row *matRowDef="let row; columns: displayedColumns" [ngClass]="{ 'highlight-row': selectedRow == row.MediaRecord.$.recordId, pointer: true }" (click)="showRecordDetailsDialog(row)">
    </mat-row>
</mat-table>

所以行看起来类似于以下内容：

在此处输入图像描述

单击播放图标时，音频元素会显示在屏幕的其他位置。

现在，我希望将该特定行的播放图标替换为暂停图标。此外，如果用户单击另一行的播放图标，则带有暂停图标的前一行应替换为播放图标。

我怎样才能做到这一点？如何获取对特定行的引用并替换那些特定图标？

4

2 回答 2

0

将另一个isPlaying[]布尔数组初始化为 false（或向现有的数组添加新列），在其中保存每一行的状态，并根据该数组更改图标。制作另一个数组（或向现有数组添加新列一）保存每一行的状态，并根据该数组更改图标。

<mat-cell *matCellDef="let element; let i = index"> 
    <button id="play" class="float-right icon-link" mat-icon-button matTooltip="{{ 'MAIN.PLAY' | translate }}" (click)="    $event.stopPropagation(); playRecord(element.recordId, i)" >    
        <i *ngIf="isPlaying[i]=false" class="fa fa-play" aria-hidden="true"></i> 
        <i *ngIf="isPlaying[i]=true" class="fa fa-pause" aria-hidden="true"></i> 
    </button>
</mat-cell>

您playRecord应该根据 播放/暂停isPlaying[i]，这就是我i作为参数传递的原因。

于 2019-05-31T10:14:31.507 回答
0

我建议在每个行条目的顶部放置一个 ui 层。

例如，您有元素 Audio

interface Audio {
    name: string;
    song: any;
}

然后像这样扩展音频：

interface UIAudio extends Audio {
    isPlaying: boolean;
}

映射数据源

dataSource = dataSource as UIAudio[];

现在您可以签入 的模板isPlaying，例如：

html:

<ng-container matColumnDef="Play"> 
    <mat-header-cell *matHeaderCellDef>{{ 'MAIN.PLAY' | translate }}</mat-header-cell> 
    <mat-cell *matCellDef="let element"> 
        <button id="play" class="float-right icon-link" mat-icon-button matTooltip="{{ 'MAIN.PLAY' | translate }}" (click)="    $event.stopPropagation(); playRecord(element)" >    
            <i class="fa fa-{{element.isPlaying ? 'pause' : 'play'}}" aria-hidden="true"></i> 
        </button>
    </mat-cell> 
</ng-container>

TS

playRecord(element) {
    element.isPlaying = true;
}

您还可以为Audio.

于 2019-05-31T11:23:04.337 回答