Question

我正在使用角度p-table，并且如果表格中的数据已更改，我必须显示保存按钮。我还实现了reorder属性，并使用 onRowReorder 事件显示按钮。所以现在，我必须做些不同的事情。仅当表数据从默认值更改时，我才需要显示保存按钮。

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

这就是我现在拥有的。

表格：

<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来检查条件是否为true，如果条件为false则可以隐藏您可以显示按钮，我已更新您的代码，希望对您有帮助。

<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;
}

如果表格数据已更改，则显示按钮；如果已更改为默认值，则显示按钮

2 个答案: