Come a livello di codice attivano aggiornare primeNG DataTable quando un pulsante viene cliccato

voti
4

Ho un pulsante di aggiornamento che è al di fuori della datatable primeNG. Come faccio a livello di codice grilletto per aggiornare il datatable?

qualcosa come questo:

<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>
È pubblicato 16/10/2016 alle 23:58
fonte dall'utente
In altre lingue...                            


3 risposte

voti
15

La guida forma angolare contiene un piccolo trucco che potrebbe essere utilizzato come una soluzione , si compone di ricreare la dom aggiungendo *ngIfall'elemento di controllare la sua visibilità

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

<button (click)="updateVisibility()">
<p-dataTable *ngIf="visible">
Risposto il 17/10/2016 a 00:21
fonte dall'utente

voti
0

Se si aggiorna l'elenco nel componente, la tabella aggiorna automaticamente. Esempio dopo confermare un'operazione di eliminazione:

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

}
Risposto il 11/06/2017 a 18:51
fonte dall'utente

voti
0

Possiamo avere piccolo trucco per aggiornare il dataTable qui: siamo in grado di ricreare il div con l'aggiunta di * ngIf all'elemento di controllare la sua visibilità da questo verrà aggiornato dataTable anche.

    visible: boolean = true;
    updateVisibility(): void {
      this.visible = false;
    }
    <button (click)="updateVisibility()">

    <div *ngIf="visible">
        <p-dataTable></p-dataTable>
    </div>
Risposto il 03/04/2018 a 08:44
fonte dall'utente

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more