항목 목록이있는 테이블이 있습니다. 드롭 다운 메뉴 옵션에 PrimeNg 메뉴를 사용하여 선택한 항목 ID가있는 다른 페이지로 이동하고 싶었습니다. 내가하고 싶었던 것은 메뉴 항목을 클릭 할 때 선택한 항목의 ID를 바인딩하고 싶었습니다.
내 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
}
},
];
토글 메서드를 호출하기 전에 현재 항목을 유지하고 클릭 이벤트에서 선택한 항목을 설정할 수있는 속성을 만들 수 있습니다.
구성 요소
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>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다