Primeng Datatable - 如何在该行中单击按钮时将样式添加到特定的tr元素

Question

我在我的角度项目中使用p-datatable。

当我在该行中单击“删除”时，我想向该行添加“display：none”样式，因为我只想隐藏它而不是删除它。仅当用户单击最终保存按钮时，该元素才会被删除。有人可以告诉我如何将tr元素传递给我的行动

我的代码看起来如何

<p-column *ngIf="configuration.RowQuickActions">
         <ng-template let-dataRow="rowData" pTemplate="body">
            <div style="text-align: center">
               <a class="action-icon">
                  <i class="material-icons text-center" [mdMenuTriggerFor]="rowQuickActionMenu">more_vert</i>
               </a>
            </div>
            <md-menu #rowQuickActionMenu="mdMenu" xPosition="before" [overlapTrigger]="false">
               <a *ngFor="let action of configuration.RowQuickActions" class="datatable-quick-action" (click)="performRowQuickAction(action, dataRow)" md-menu-item>
                  <i *ngIf="action.ActionIcon" class="material-icons">{{action.ActionIcon}}</i>{{action.ActionName}}</a>
            </md-menu>
         </ng-template>
      </p-column>

可以有许多操作，许多数据表都使用此功能。

Answer 1

尝试使用[ngClass]。您可以编写函数，单击按钮时返回“display：none”，否则返回“”。

Answer 2

使用[ngStyle]指令隐藏你的行

Answer 3

在删除功能中添加css

style="display: none"

或者如果要将样式应用于与p-DataTable关联的内部元素，请使用styleClass

示例：

<p-datatable="InputData"styleClass="input-data">

你的CSS中的

：

.input-data{
 display:none;
}

希望有所帮助

Answer 4

我将主要数据表更新为最新版本（TurboTable），新代码有tr标记，所以只需在html中添加以下内容

＆＃13;

＆＃13;

<tr *ngIf="!dataRow.hide"> 

＆＃13;

＆＃13;

＆＃13;

并在组件的方法中添加了这个。

＆＃13;

＆＃13;

performRowQuickAction(action, dataRow) {
  dataRow.Hide = true;
  // do other things
}

＆＃13;

＆＃13;

＆＃13;

感谢大家的帮助。