angular - Angular Material Tableは特定の行の内容を変更します

Question

私はMaterialテーブルで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>

したがって、行は次のようになります。

再生アイコンをクリックすると、オーディオ要素が画面の別の場所に表示されます。

ここで、その特定の行の再生アイコンを一時停止アイコンに置き換えたいと思います。また、ユーザーが別の行の再生アイコンをクリックすると、一時停止アイコンのある前の行が再生アイコンに置き換えられます。

これどうやってするの？特定の行への参照を取得し、それらの特定のアイコンを置き換えるにはどうすればよいですか?