web-dev-qa-db-fra.com

Comment utiliser le menu Primeng avec la commande et les paramètres dans DataTable?

MenuItem de primeng a un paramètre appelé commande qui est une fonction à exécuter lorsque son élément est cliqué. Un exemple d'utilisation de ceci est fourni dans https://www.primefaces.org/primeng/#/steps pour donner des commentaires à l'utilisateur.

command: (event: any) => {
                this.activeIndex = 0;
                this.msgs.length = 0;
                this.msgs.Push({severity:'info', summary:'First Step', detail: event.item.label});
            }

Cependant, je veux utiliser le MenuItem comme une colonne de mon Primeng DataTable, comme ceci.

enter image description here

Et pour cela, je dois utiliser mon menu de cette façon:

<p-column>
  <ng-template let-item="rowData"
      <p-menu #menu popup="popup" [model]="items"></p-menu>
      <button type="button" pButton icon="fa fa-list" label="Show" (click)="menu.toggle($event)"></button>
  </ng-template>
</p-column>

Pour obtenir "élément" et la ligne sur laquelle je clique et d'autres types de données.

En utilisant un bouton, je peux transmettre un élément et d'autres données via onClick, mais pour cela, je dois créer une colonne pour chaque bouton. Et pour résoudre ce problème, je veux utiliser Menu avec MenuItem de primeng.

Le problème est que je ne trouve aucun exemple passant des paramètres via une commande dans MenuItem et je ne trouve aucun moyen de le faire.

Comment puis-je accomplir cela en utilisant MenuItem avec DataTable?

Si ce n'est pas possible, comment puis-je obtenir les mêmes résultats?

angularprimengprimeng-datatable
6
Gabriel Costa

Vous pouvez avoir une fonction qui prend rowData et renvoie du contexte MenuItem[]

<p-column>
  <ng-template let-item="rowData"
      <p-menu #menu popup="popup" [model]="getMenuItemsForItem(item)"></p-menu>
      <button type="button" pButton icon="fa fa-list" label="Show" (click)="menu.toggle($event)"></button>
  </ng-template>
</p-column>

  getMenuItemsForItem(item: MyItem): MenuItem[] {
    const context = item;
    return [
      { label: 'Label1', icon: 'fa-plus', command: e => this.takeAction(e, context) }
    ]
  }

METTRE À JOUR

[model]="getMenuItemsForItem(item)"

peut entraîner des problèmes de performances, devrait plutôt utiliser une liaison à un objet.

[model]="menuItems[item.uniqueKey]"

puis définissez l'objet menuItems avec des éléments de menu pour chaque élément.

6
sabithpocker

J'ai trouvé un moyen de résoudre le problème, même si je pense que ce n'est pas la meilleure solution. J'espère que ceux qui ont le même problème pourront le trouver utile.

Passer l'élément de tableau via onClick et remplir le menuItems avec les travaux de rappel.

Échantillon:

<p-column>
  <ng-template let-item="rowData"
      <p-menu #menu popup="popup" (onClick)="onClickMenu(item)" [model]="items"></p-menu>
      <button type="button" pButton icon="fa fa-list" label="Show" (click)="menu.toggle($event)"></button>
  </ng-template>
</p-column>
onClickMenu(item: any){

  this.items.Push({label: 'Option 1',
                  command: (event: any) => {
                  doSomething(item);}
                  });

  this.items.Push({label: 'Option 2',
                  command: (event: any) => {
                  doSomething(item);}
                  });

  this.items.Push({label: 'Option 3',
                  command: (event: any) => {
                  doSomething(item);}
                  });
                
}
3
Gabriel Costa

Je sais que c'est vieux mais une chose qui pourrait éviter d'avoir NN p-menu les directives de votre page seraient d'appeler une fonction depuis votre composant en cliquant sur le bouton au lieu de (click)="menu.toggle($event)" et dans cette fonction injecter les données sur chaque élément de menu.

Je sais que c'est un peu hacky mais c'est mieux que de répliquer un p-menu pour chaque ligne du tableau.

Voici un exemple :

<p-menu #popupMenu [popup]="true" [model]="menuItems"></p-menu>

<!-- and where you want to open the menu -->
<a *ngIf="itemsMenu" (click)="toggleMenu(popupMenu, $event, rowData)">
    <i class="fas fa-chevron-circle-down"></i>
</a>

 toggleMenu(menu, event, rowData) {
    this.menuItems.forEach((menuItem) => {
      menuItem.data = rowData;
    });
    menu.toggle(event);
  }

Cordialement

2
Mathieu de Lorimier

JS

this.items = (rowData) => {
  return [
    {
      label: 'Certidão', icon: 'ui-icon-print', command: (event) => {
        console.log(rowData);
      }
    },
    {
      label: 'Declaração', icon: 'ui-icon-print', command: (event) => {
        console.log(rowData);
      }
    }
  ];
};

HTML

<p-splitButton label="{{ rowData.nomeColaborador }}" icon="ui-icon-folder" [model]="items(rowData)" >

Si vous voulez passer un rowData, vous pouvez expliciter un appel de fonction comme celui-ci

1
Bryann Bueno

Une autre option consiste à ajouter les données de menu actuelles à une variable privée lors de la sélection du menu, comme suit:

<p-menu #menu popup="popup" [model]="items"></p-menu>
      <button type="button" class="btn-more" pButton icon="icon-more" label=" " (click)="menu.toggle($event);onClickMenu(rowData);"></button>

public onClickMenu(rowData: any) { 
        this.currentRowData = rowData; 
    }

Faites-moi savoir s'il y a des répercussions à le faire de cette façon, merci.

0
vicgoyso