web-dev-qa-db-fra.com

Comment déclencher par programme l'actualisation d'une date d'activation de primeNG lorsqu'un clic est effectué sur un bouton

J'ai un bouton d'actualisation qui se trouve en dehors de la datatable PrimeNG. Comment puis-je déclencher par programme pour actualiser la datatable?

quelque chose comme ça:

<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>
angulartypescriptprimeng
6
kimondoe

Le Angular guide de formulaire contient un petit truc qui pourrait être utilisé comme un solution de contournement, il consiste à recréer le dom en ajoutant *ngIf à l'élément pour contrôler sa visibilité.

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

<button (click)="updateVisibility()">
<p-dataTable *ngIf="visible">
19
Mauricio Poppe

Nous pouvons avoir une petite astuce pour mettre à jour le dataTable ici: Nous pouvons recréer la div en ajoutant * ngIf à l'élément pour contrôler sa visibilité, ceci mettra également à jour dataTable.

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

    <div *ngIf="visible">
        <p-dataTable></p-dataTable>
    </div>
4
Nitin Jangid

Si vous actualisez la liste dans le composant, la table est automatiquement actualisée. Exemple après confirmation d'une opération de suppression:

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

}
0
jmfvarela