如果 table 数据更改则显示按钮，如果更改回默认值则隐藏

Question

我正在使用 angular p-table，如果来自 table 的数据发生更改，我必须显示保存按钮。我还实现了重新排序属性并使用 onRowReorder 事件来显示按钮。所以现在，我必须做一些不同的事情。仅当 table 数据已从默认值更改时，我才需要显示保存按钮。

因此，如果我向下移动一行然后又将其放回原位，则按钮不应该可见。

这就是我现在所拥有的。

Table:

<p-table 
  #dt 
  selectionMode="single" 
  [value]="gridData" 
  [(selection)]="selectedRow" 
  [responsive]="true" 
  [rows]="tableSize" 
  [paginator]="true" 
  [alwaysShowPaginator]="false" 
  [pageLinks]="3" 
  [globalFilterFields]="globalFilterFields" 
  [rowsPerPageOptions]="rowsPerPage"
  scrollable="true" 
  scrollHeight="500px" 
  sortField="priority" 
  sortOrder="1" 
  [reorderableColumns]="true" 
  (onRowReorder)="onRowReorder()" 
  dataKey="name">

按钮:

<p-button 
  *ngIf="showSaveBtn === true" 
  class="pull-left mTop12 mBot12" 
  (click)="updatePriority()" 
  label="{{'MappingRules.Buttons.Save' | translate}}" 
  icon="fa fa-refresh">
</p-button>

这是当前按钮 ts 文件：

默认为：

public showSaveBtn: boolean = false;

函数是：

onRowReorder() {
    this.showSaveBtn = true;
}

Answer 1

您可以使用onEditInit 和onEditComplete 来比较编辑前后的值以显示和隐藏按钮

 previousValue:any;
showSaveBtn:boolean;
onEditInit (event:any){
    this.previousValue=event.data;
    }
    onEditComplete (event:any){
    if(event.data!=this.previousValue){
    this.showSaveBtn=true
    }
    else{
    this.showSaveBtn=false;
    }
    }

Answer 2

您可以使用 ngClass 来检查条件是否为真如果条件为假则可以隐藏你可以显示我已经更新你的代码的按钮希望这会对你有所帮助。

<p-button 
 [ngClass]="{'showhide': showSaveBtn }"
  class="pull-left mTop12 mBot12" 
  (click)="updatePriority()" 
  label="{{'MappingRules.Buttons.Save' | translate}}" 
  icon="fa fa-refresh">
</p-button>

.showhide{
display:none;
}

如果 table 数据更改则显示按钮，如果更改回默认值则隐藏

Show button if table data was changed and hide if that's changed back to default

show-hide

angular