Búsqueda de sitios web

javascript - Cómo vincular un id al comando del menú de PrimeNg

Tengo una tabla con una lista de elementos. Quería usar el menú de PrimeNg para opciones de menú desplegable para navegar a otras páginas con el id del elemento seleccionado. Lo que quería hacer es que, cuando haga clic en los elementos del menú, quería enlazar el id del elemento seleccionado.

mi HTML se ve así

<tr *ngFor="let item of items" class="animated fadeIn">
    <td>{{item.category}}</td>
    <td>{{item.name}}</td>
    <td>{{item.date}}</td>
    <td>
       <div>
           <p-menu #tableMenu [popup]="true" [model]="tableMenuItems" appendTo="body"></p-menu>
               <button type="button" pButton icon="pi pi-ellipsis-v"
                   class="ui-button-secondary ui-button-rounded ui-button-transparent"
                   (click)="tableMenu.toggle($event)">
               </button>
       </div>
    </td>
</tr>

y mi .ts

this.tableMenuItems = [
  {
    label: 'View Item', command: (event) => {
      // this.viewItemDetail() // here I wanted to bind item.id of the selected item and navigate to item detail page
    }
  },
  {
    label: 'Edit Item', command: (event) => {
      this.editItem() // here I wanted to bind item.id of the selected item and navigate to item edit page
    }
  },
];

Respuesta #1

puedes crear una propiedad para mantener el elemento actual y establecer el elemento seleccionado en el evento de clic antes de invocar el método toggle

componente

 selectedItem:any = null;
 ...
 ngOnInit(){

 this.tableMenuItems = [
  {
    label: 'View Item', command: (event) => {
       console.log(this.selectedItem);
      // this.viewItemDetail() // here I wanted to bind item.id of the selected item and navigate to item detail page
    }
  },
  {
    label: 'Edit Item', command: (event) => {
      this.editItem() // here I wanted to bind item.id of the selected item and navigate to item edit page
    }
  },
];
}

plantilla

<tr *ngFor="let item of items" class="animated fadeIn">
    <td>{{item.category}}</td>
    <td>{{item.name}}</td>
    <td>{{item.date}}</td>
    <td>
       <div>
           <p-menu #tableMenu [popup]="true" [model]="tableMenuItems" appendTo="body"></p-menu>
               <button type="button" pButton icon="pi pi-ellipsis-v"
                   class="ui-button-secondary ui-button-rounded ui-button-transparent"
                   (click)="selectedItem = item;tableMenu.toggle($event)">
               </button>
       </div>
    </td>
</tr>

Respuesta #2

Muy buena solución. Había aplicado este mismo concepto a la tabla PrimeNg y al SplitButton usando el evento onDropdownClick, así:

Plantilla:-

<p-splitButton [label]="getButtonText(element.status)" [model]="menuItens" icon="pi pi-plus-circle"
(onClick)="edit(element.identifier, element.title, element.status, element)" (onDropdownClick)="selectedItem = element"></p-splitButton>

Luego, en el archivo ts correspondiente del componente:

  this.menuItens = [
    {
      label: 'Print', icon: 'pi pi-fw pi-print', command: () => {
        this.print(this.selectedItem.identifier, this.selectedItem.title, this.selectedItem);
      }
    },
    { separator: true },
    { label: 'Admin'}

  ];

Artículos relacionados