web-dev-qa-db-ja.com

ボタンがクリックされたときに、primeNGデータテーブルの更新をプログラムでトリガーする方法

PrimeNGデータテーブルの外側にある更新ボタンがあります。プログラムでトリガーしてデータテーブルを更新するにはどうすればよいですか？

このようなもの：

<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
8
kimondoe

角度形式ガイド には、回避策として使用できる小さなトリックが含まれています。これは、*ngIfを追加してdomを再作成することで構成されます要素の可視性を制御する

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

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

ここでdataTableを更新する小さなトリックを設定できます。要素に* ngIfを追加してdivを再作成し、これによって可視性を制御して、dataTableも更新します。

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

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

コンポーネントのリストを更新すると、テーブルが自動的に更新されます。削除操作を確認した後の例：

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