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

В вашей функции удаления добавьте CSS

style="display: none"

или Если вы хотите применить стили к внутренним элементам, которые связаны с p-DataTable затем используйте styleClass

Пример:

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

в вашем CSS:

.input-data{
 display:none;
}

Надеюсь, поможет

Answer 2

Попробуйте использовать [ngClass]. Вы можете написать функцию, которая возвращает "display: none" при нажатии кнопки и "" в противном случае.

Answer 3

Используйте директиву [ngStyle] для строки Hide you

Answer 4

Я обновил простую таблицу данных ng до последней редакции (TurboTable), и в новом коде есть теги t r, поэтому я просто добавил приведенный ниже в HTML

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

и в методе в компоненте я добавил это.

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

Спасибо всем за помощь.