2016-10-17 3 views
3

У меня есть кнопка обновления, которая находится за пределами первичного datatable. Как программно запускать, чтобы обновить datatable?Как программно запускать refresh primeNG datatable, когда нажимается кнопка

что-то вроде этого:

<div class="pull-right"> 
    <button 
    id="FilterBtnId" 
    (click)="???"> 
    </button> 
       </div> 
<p-dataTable 
    #datatable 
    [value]="datasource" 
    [(selection)]="jobs" 
    [totalRecords]="totalRecords" 
    selectionMode="multiple" 
    resizableColumns="true" 
    [pageLinks]="10" 
    [rows]="10" 
    [rowsPerPageOptions]="[10, 25, 50, 100]" 
    [paginator]="true" 
    [responsive]="true" 
    [lazy]="true" 
    (onLazyLoad)="getNewDatasource($event)" 
    (onRowSelect)="onRowSelect($event)" 
    > 
    <p-column [style]="{'width':'40px'}" selectionMode="multiple"></p-column> 
    <p-column *ngFor="let col of dt.colDefs" [field]="col.field" [header]="col.headerName" [sortable]="true"> 
    </p-column> 
</p-dataTable> 

ответ

12

Angular form guide содержит небольшой трюк, который можно было бы использовать в качестве обходного, состоит в воссоздании РОМ путем добавления *ngIf к элементу управления его видимость

visible: boolean = true; 
updateVisibility(): void { 
    this.visible = false; 
    setTimeout(() => this.visible = true, 0); 
} 

<button (click)="updateVisibility()"> 
<p-dataTable *ngIf="visible"> 
+0

Спасибо: D так много работает! – ketimaBU

0

Если вы обновите список в компоненте, таблица обновится автоматически. Пример после подтверждения операции удаления:

import { Component } from '@angular/core'; 
import { Interface } from '../..//model/interface.model' 
import { InterfaceService } from '../../service/interface.service' 
import { ButtonModule } from 'primeng/primeng'; 
import { ConfirmDialogModule, ConfirmationService } from 'primeng/primeng'; 

@Component({ 
    templateUrl: './interfaces.component.html' 
}) 
export class InterfacesComponent { 

    interfaces: Interface[]; 

    constructor(
     private interfaceService: InterfaceService, 
     private confirmationService: ConfirmationService 
    ) { } 

    ngOnInit() { 
     this.find(); 
    } 

    find() { 
     this.interfaceService.query().then(interfaces => this.interfaces = interfaces); 
    } 

    confirm(id: number) { 
     this.confirmationService.confirm({ 
      message: 'Are you sure that you want to delete this record?', 
      accept:() => { 
       this.interfaceService.delete(id).then((_interface) => { 
        this.find(); 
       });    
      } 
     }); 
    } 

}