Как привязать идентификатор к команде меню PrimeNg

У меня есть таблица со списком предметов. Я хотел использовать PrimeNg Menu для выпадающего меню, чтобы перейти на другие страницы с идентификатором выбранного элемента. Что я хотел сделать, так это, когда я нажимал на пункты меню, я хотел привязать идентификатор выбранного элемента.

мой HTML выглядит так

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

и мой .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
    }
  },
];

Всего 1 ответ


Вы можете создать свойство для хранения текущего элемента и установить выбранный элемент в событие щелчка, прежде чем вызывать метод переключения

компонент

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

шаблон

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


Есть идеи?

10000