Primeng Datatable - 如何在该行中单击按钮时向特定 tr 元素添加样式答案

【问题标题】：Primeng Datatable - How to add styles to particular tr element when a button is clicked in that rowPrimeng Datatable - 如何在该行中单击按钮时向特定 tr 元素添加样式
【发布时间】：2018-02-15 23:03:47
【问题描述】：

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

当我在该行中单击“删除”时，我只想向该行添加“显示：无”样式，因为我只想隐藏它而不是删除它。只有当用户单击最终保存按钮时，该元素才会真正被删除。有人可以建议我如何将 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>

可以有很多动作，很多数据表都使用这个功能。

【问题讨论】：

标签： css angular primeng primeng-datatable

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

在你的删除函数中添加 css

style="display: none"

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

示例：

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

在你的 CSS 中：

.input-data{
 display:none;
}

希望对你有帮助

【讨论】：

【解决方案4】：

我将prime ng数据表更新为最新版本（TurboTable），新代码具有tr标签，所以只需在html中添加以下标签

&lt;tr *ngIf="!dataRow.hide"&gt;

并且在组件的方法中我已经添加了这个。

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

感谢大家的帮助。

【讨论】：