web-dev-qa-db-ja.com

DataTableのコマンドとパラメーターでPrimengメニューを使用する方法

Primengの​​MenuItemには、コマンドと呼ばれるパラメーターがあり、そのアイテムがクリックされたときに実行される関数です。これを使用する1つの例が https://www.primefaces.org/primeng/#/steps にあり、ユーザーにフィードバックを提供しています。

command: (event: any) => {
                this.activeIndex = 0;
                this.msgs.length = 0;
                this.msgs.Push({severity:'info', summary:'First Step', detail: event.item.label});
            }

ただし、このように、Primeng DataTableの列としてMenuItemを使用したいと思います。

enter image description here

そして、このために私はこのように私のメニューを使用する必要があります：

<p-column>
  <ng-template let-item="rowData"
      <p-menu #menu popup="popup" [model]="items"></p-menu>
      <button type="button" pButton icon="fa fa-list" label="Show" (click)="menu.toggle($event)"></button>
  </ng-template>
</p-column>

「アイテム」とクリックしている行とその他の種類のデータを取得します。

ボタンを使用すると、onClickを介してアイテムやその他のデータを渡すことができますが、そのためには、ボタンごとに1つの列を作成する必要があります。そしてそれを解決するためにprimengからのMenuItemでMenuを使いたいです。

問題は、MenuItemのコマンドを介してパラメーターを渡す例が見つからず、それを行う方法が見つからないことです。

DataTableでMenuItemを使用してそれをどのように達成できますか？

それが不可能な場合、どうすれば同じ結果を達成できますか？

angularprimengprimeng-datatable
6
Gabriel Costa

RowDataを取り、コンテキストMenuItem[]を返す関数を持つことができます

<p-column>
  <ng-template let-item="rowData"
      <p-menu #menu popup="popup" [model]="getMenuItemsForItem(item)"></p-menu>
      <button type="button" pButton icon="fa fa-list" label="Show" (click)="menu.toggle($event)"></button>
  </ng-template>
</p-column>

  getMenuItemsForItem(item: MyItem): MenuItem[] {
    const context = item;
    return [
      { label: 'Label1', icon: 'fa-plus', command: e => this.takeAction(e, context) }
    ]
  }

更新

[model]="getMenuItemsForItem(item)"

パフォーマンスの問題を引き起こす可能性があります。代わりにオブジェクトへのバインディングを使用する必要があります。

[model]="menuItems[item.uniqueKey]"

次に、menuItemsオブジェクトに各項目のメニュー項目を設定します。

6
sabithpocker

問題を解決する方法を見つけましたが、それは最善の解決策ではないと思います。同じ問題を抱えている人たちに役立つと思います。

OnClickを介してテーブルアイテムを渡し、menuItemsにコールバックを入力すると機能します。

サンプル：

<p-column>
  <ng-template let-item="rowData"
      <p-menu #menu popup="popup" (onClick)="onClickMenu(item)" [model]="items"></p-menu>
      <button type="button" pButton icon="fa fa-list" label="Show" (click)="menu.toggle($event)"></button>
  </ng-template>
</p-column>
onClickMenu(item: any){

  this.items.Push({label: 'Option 1',
                  command: (event: any) => {
                  doSomething(item);}
                  });

  this.items.Push({label: 'Option 2',
                  command: (event: any) => {
                  doSomething(item);}
                  });

  this.items.Push({label: 'Option 3',
                  command: (event: any) => {
                  doSomething(item);}
                  });
                
}
3
Gabriel Costa

私はこれが古いことを知っていますが、ページにNN p-menuディレクティブが必要になるのを防ぐことができる1つのことは、(click)="menu.toggle($event)"ではなくボタンクリック時にコンポーネントから関数を呼び出し、その関数にデータを挿入することです各メニュー項目。

私はこれが一種のハックであることを知っていますが、すべてのテーブル行に対してp-menuを複製するよりも優れています。

次に例を示します。

<p-menu #popupMenu [popup]="true" [model]="menuItems"></p-menu>

<!-- and where you want to open the menu -->
<a *ngIf="itemsMenu" (click)="toggleMenu(popupMenu, $event, rowData)">
    <i class="fas fa-chevron-circle-down"></i>
</a>

 toggleMenu(menu, event, rowData) {
    this.menuItems.forEach((menuItem) => {
      menuItem.data = rowData;
    });
    menu.toggle(event);
  }

よろしく

2
Mathieu de Lorimier

JS

this.items = (rowData) => {
  return [
    {
      label: 'Certidão', icon: 'ui-icon-print', command: (event) => {
        console.log(rowData);
      }
    },
    {
      label: 'Declaração', icon: 'ui-icon-print', command: (event) => {
        console.log(rowData);
      }
    }
  ];
};

HTML

<p-splitButton label="{{ rowData.nomeColaborador }}" icon="ui-icon-folder" [model]="items(rowData)" >

RowDataを渡したい場合は、次のような関数呼び出しを明示的に指定できます。

1
Bryann Bueno

別のオプションは、次のようにメニューを選択すると、現在のメニューのrowDataをプライベート変数に追加することです。

<p-menu #menu popup="popup" [model]="items"></p-menu>
      <button type="button" class="btn-more" pButton icon="icon-more" label=" " (click)="menu.toggle($event);onClickMenu(rowData);"></button>

public onClickMenu(rowData: any) { 
        this.currentRowData = rowData; 
    }

このようにすることで何か反響があるかどうか教えてください、ありがとう。

0
vicgoyso