html - 表中的目标迭代 fa-icon 行

问题描述

我有一个使用 primeNg 制作的嵌套表。每行表示一个任务。每行都有一个start fa-icon启动任务，如果启动了一个特定的任务，开始按钮将被替换为一个stop fa-icon，以防任何用户想要停止正在进行的任务。

任务是嵌套的（注意行左侧的展开箭头）。使用我当前的代码，每当我单击时start fa-icon，表中的所有 fa-icons 都会“启动”。我需要指定地抓取启动任务的行的播放 fa-icon 并将该确切的播放 fa-icon 替换为stop fa-icon.

我正在使用*ngIf和Boolean变量将 start fa-icon 替换为 stop fa-icon。

.ts：

  playTask:boolean = true;
  stopTask:boolean = false;

  playClicked(array , i , j, event:any){
   this.playTask = false;
   this.stopTask = true;

   var target = event.target || event.srcElement || event.currentTarget;
   var idAttr = target.attributes.id
   console.log( "id: ", idAttr);
  }
 
  stopClicked(array , i , j, event:any){
   this.playTask = true;
   this.stopTask = false;
  }

html:

<p-table id="main-table" [value]="tasks" dataKey="col1">
        <ng-template pTemplate="header">
            <tr>
                    <th></th>
                    <th>Col 1 <fa-icon [icon]="faChevronUp"></fa-icon><fa-icon [icon]="faChevronDown"></fa-icon></th>
                    <th>Col 2 <fa-icon [icon]="faChevronUp"></fa-icon><fa-icon [icon]="faChevronDown"></fa-icon></th>
                    <th>Col 3 <fa-icon [icon]="faChevronUp"></fa-icon><fa-icon [icon]="faChevronDown"></fa-icon></th>
                    <th>Col 4 <fa-icon [icon]="faChevronUp"></fa-icon><fa-icon [icon]="faChevronDown"></fa-icon></th>
                    <th>Col 5 <fa-icon [icon]="faChevronUp"></fa-icon><fa-icon [icon]="faChevronDown"></fa-icon></th>
                    <th>Col 6</th>
                    <th>Action</th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body"  let-i="rowIndex" let-parentTasks let-expanded="expanded" >
            <tr *ngFor="let parentTasks of tasks">
                    <td>
                        <button type="button" pButton pRipple [pRowToggler]="parentTasks"  [icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-up'"></button>
                    </td>
                    <td>{{parentTasks.row1}}</td>
                    <td>{{parentTasks.row2}}</td>
                    <td>{{parentTasks.row3}}</td>
                    <td>{{parentTasks.row4}}</td>
                    <td>{{parentTasks.row5}}</td>
                    <td>{{parentTasks.row6}}</td>
                <td>
                    <fa-icon *ngIf="playTask" [icon]="faPlayCircle"></fa-icon>
                    <fa-icon *ngIf="stopTask" [icon]="faStopCircle"></fa-icon>
                    <fa-icon [icon]="faCommentDots"></fa-icon>
                </td>
            </tr>
        </ng-template>
        <ng-template pTemplate="rowexpansion"  let-parentTasks let-i="rowIndex">
            <tr>
                <td>
                    <div class="expandedRow">
                        <p-table [value]="parentTasks.appointments" dataKey="row1">
                            <ng-template pTemplate="body" let-childTasks let-j="rowIndex"  let-childTasks.viewDetails="false">
                                <tr>
                                    <td>
                                        <i (click)="childTasks.viewDetails = !childTasks.viewDetails" [ngClass]="childTasks.viewDetails ? 'pi pi-chevron-down' : 'pi pi-chevron-up'"></i>
                                    </td>
                                    <td>{{childTasks.row1}}</td>
                                    <td>{{childTasks.row2}}</td>
                                    <td>{{childTasks.row3}}</td>
                                    <td>{{childTasks.row4}}</td>
                                    <td>{{childTasks.row5}}</td>
                                    <td>{{childTasks.row6}}</td>
                                    <td>
                                        <fa-icon *ngIf="playTask" (click)="playClicked(childTasks, i, j , $event)" id="{{'play'}}" [icon]="faPlayCircle"></fa-icon>
                                        <fa-icon *ngIf="stopTask" (click)="stopClicked(childTasks, i, j, $event)" id="{{'pause'}}" [icon]="faStopCircle"></fa-icon>
                                        <fa-icon [icon]="faCommentDots"></fa-icon>
                                    </td>
                                </tr>
                            </ng-template>
                        </p-table>
                    </div>
                </td>
            </tr>
        </ng-template>
    </p-table>

我尝试使用 $event 获取该行的任何唯一 ID，但它始终返回为空。注意：查看 (click) 事件的子任务。

标签： htmlangularhtml-tableprimengprimeng-datatable

html - 表中的目标迭代 fa-icon 行 - Angular，primeNg

问题描述

解决方案

推荐阅读