Показать кнопку, если данные таблицы были изменены, и скрыть, если они вернулись к значениям по умолчанию - PullRequest
Новая
       25

Показать кнопку, если данные таблицы были изменены, и скрыть, если они вернулись к значениям по умолчанию

0 голосов
/ 19 сентября 2018

Я использую угловой 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 file:

По умолчанию: 

public showSaveBtn: boolean = false;

И функция: 

onRowReorder() {
    this.showSaveBtn = true;
}

Ответы [ 2 ]

0 голосов
/ 19 сентября 2018

Вы можете использовать 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;
}
0 голосов
/ 19 сентября 2018

вы можете использовать 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;
    }
    }
...