Angular Material Table 更改特定行内容答案

【问题标题】：Angular Material Table change specific row contentAngular Material Table 更改特定行内容
【发布时间】：2019-05-31 19:23:04
【问题描述】：

我有 Angular 7 和 Material 表：

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

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

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

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

我该怎么做？如何获取对特定行的引用并替换那些特定图标？

【问题讨论】：

标签： angular angular-material angular-material-table

【解决方案1】：

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

【讨论】：

【解决方案2】：

我建议在每行条目的顶部放置一个 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>

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

您还可以为Audio 创建一个组件。

【讨论】：