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

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

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

Answer 2

I would suggest do put an ui layer on top of each row entry.

For example, you have the element Audio

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

Then extend Audio like:

interface UIAudio extends Audio {
    isPlaying: boolean;
}

Map the dataSource

dataSource = dataSource as UIAudio[];

Now you can check in the template for isPlaying, like:

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;
}

You could also create a Component for Audio.

角材料表更改特定的行内容

2 个答案: