我需要修復我的手風琴中的一個錯誤。
HTML：
<p-menu
#menu
[popup]="true"
[model]="menusMap[item.id]"
></p-menu>
<button
pButton
class="p-button-text"
icon="pi pi-ellipsis-h"
(click)="menu.toggle($event)"
></button>
在 ts 我有：
menusMap: Record<string, MenuItem[]> = {};
e!: Event;
function(){
......
if (page.list) {
const items = page.list;
this.menusMap = {};
items .forEach((item) => {
this.menusMap[item.id] = this.createMenuList(item);
});
}
}
createMenuList(item: Items): MenuItem[] {
this.e.stopPropagation(); // I used this but doesn't work. Only blocks the list display
return [
{
label: '',
icon: '',
command: () =>
this.router.navigate(/aaa)
}
];
}
我的問題是，當點擊action menu我不需要打開手風琴。我只需要打開操作選單，而不是手風琴。
uj5u.com熱心網友回復：
你可以使用這個技巧：
<button
pButton
class="p-button-text"
icon="pi pi-ellipsis-h"
(click)="$event.stopPropagation(); menu.toggle()"
></button>
但另外我不得不說，你傳遞$event給.toggle()不屬于你的函式的函式，傳遞不會改變任何東西。
你可以.ts在你的.html檔案中實作一個函式并在你的檔案中呼叫它。
像這樣：
HTML：
<button
pButton
class="p-button-text"
icon="pi pi-ellipsis-h"
(click)="toggleMenu($event, menu)"
></button>
TS：
public toggleMenu(ev, menuRef) {
ev.stopPropagation();
menuRef.toggle();
}
uj5u.com熱心網友回復：
你能提供一個作業樣本@ Stackblitz嗎？
在那之前嘗試這個解決方案它可能會給你更多的想法。樣本
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/343775.html