Angular Material Table меняет конкретное содержимое строки

Question

У меня есть 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>

Так строки выглядят примерно так:

НаЕсли щелкнуть значок «Воспроизведение», в другом месте экрана отобразится звуковой элемент.

Теперь я хочу, чтобы значок «Воспроизведение» этой конкретной строки был заменен значком «Пауза».Кроме того, если пользователь щелкает значок «Воспроизведение» другой строки, предыдущий ряд со значком «Пауза» должен быть заменен значком «Воспроизведение».

Как это сделать?Как я могу получить ссылку на определенные строки и заменить эти конкретные значки?

Answer 1

Я бы посоветовал поместить слой пользовательского интерфейса поверх каждой записи строки.

Например, у вас есть элемент Audio

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

, а затем расширить Audio как:

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.

Answer 2

Создайте другой массив 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 в качестве параметра.