2017-11-29 7 views
0

primeng의 MenuItem에는 command라는 매개 변수가 있습니다.이 매개 변수는 해당 항목을 클릭 할 때 실행되는 함수입니다. 이를 사용하는 한 가지 예가 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}); 
      } 

그러나 MenuItem을 내 Primeng DataTable의 열로 사용하고 싶습니다.

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에 대해 하나의 열을 만들어야합니다. 그리고 그것을 해결하기 위해 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);} 
 
        }); 
 
       
 
}