javascript - Hvordan binde id til PrimeNg-menykommando

Jeg har et bord med en liste over elementer. Jeg ønsket å bruke PrimeNg-meny for rullegardinmenyalternativer for å navigere til andre sider med den valgte element-IDen. Det jeg ønsket å gjøre, er at når jeg klikker på menyvalgene, ønsket jeg å binde IDen til det valgte elementet.

min HTML ser slik ut

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

og min .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
    }
  },
];

Svar #1

Du kan opprette en egenskap for å holde det nåværende elementet og sette det valgte elementet ved klikkhendelsen før du kaller på toggle-metoden

komponent

 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
    }
  },
];
}

mal

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

Svar #2

Veldig god løsning. Jeg hadde brukt dette samme konseptet på PrimeNg Table og SplitButton ved å bruke onDropdownClick-hendelsen, slik:

Mal:-

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

Deretter i respektive ts-filkomponent:

  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'}

  ];

Relaterte artikler