时间戳

首页 > 解决方案 > Angular Material Table 更改特定行内容

angular - Angular Material Table 更改特定行内容

问题描述

我有带有材料表的 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>

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

在此处输入图像描述

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

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

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

标签： angularangular-materialangular-material-table

解决方案

将另一个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作为参数传递的原因。

推荐阅读