2017-11-29 5 views
0

primengの​​MenuItemには、その項目がクリックされたときに実行される関数であるcommandというパラメータがあります。これを使用する1つの例は、https://www.primefaces.org/primeng/#/stepsに提供され、ユーザーにフィードバックを与えます。(DataTableの)パラメータを持つMenuItemコマンドの使用方法

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> 

buttomを使用すると、アイテムやその他のデータをonClickで渡すことができますが、このためにはそれぞれのbuttomに1つの列を作成する必要があります。それを解決するために、私はprimengの​​MenuItemでMenuを使いたいと思っています。

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

DataTableでMenuItemを使用するとどうすればできますか?

これができない場合は、どうすれば同じ結果が得られますか?

+0

あなたはこのためstackblitzまたはplunkerを得ましたか。 –

+0

@ChauTran私はplunkerを持っていないが、私は回避策を見つけた。問題の疑いがある場合は、私が理解するのを手伝っています。あなたの質問に注意をしていただきありがとうございます。 –

答えて

0

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

onClickを介してテーブルアイテムを渡し、コールバックでmenuItemを設定します。

サンプル:

<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);} 
 
        }); 
 
       
 
} 
 
      

関連する問題