2017-07-13 8 views
1

別の位置に表示されます。Primengは(角度は4):のContextMenuは、私は次のコードを持っている

<p-dataTable [contextMenu]="cm" [value]="Usuarios" selectionMode="single" [(selection)]="selectedRecord" resizableColumns="true" [rows]="10" [paginator]="true" [pageLinks]="3" [rowsPerPageOptions]="[5,10,20]" scrollable="true" scrollWidth="100%"> 
     <p-column [sortable]="true" field="id" header="ID" [style]="{'width':'50px'}"></p-column> 
     <p-column [sortable]="true" field="dni" header="DNI" [style]="{'width':'80px'}"></p-column> 
     <p-column [sortable]="true" field="ap_paterno" header="Apellido Paterno" [style]="{'width':'120px'}"></p-column> 
     <p-column [sortable]="true" field="ap_materno" header="Apellido Materno" [style]="{'width':'120px'}"></p-column> 
     <p-column [sortable]="true" field="nombres" header="Nombres" [style]="{'width':'120px'}"></p-column> 
     <p-column [sortable]="true" field="fecnac" header="Fecha de Nac" [style]="{'width':'150px'}"></p-column> 
     <p-column [sortable]="true" field="est_civil" header="Estado Civil" [style]="{'width':'120px'}"></p-column> 
     <p-column [sortable]="true" field="fec_ingreso" header="Fecha de Ingreso" [style]="{'width':'120px'}"></p-column> 
     <p-column [sortable]="true" field="movil" header="Movil" [style]="{'width':'100px'}"></p-column> 
     <p-column [sortable]="true" field="fijo" header="Fijo" [style]="{'width':'90px'}"></p-column> 
     <p-column [sortable]="true" field="direccion" header="Dirección" [style]="{'width':'180px'}"></p-column> 
     <p-column [sortable]="true" field="distrito" header="Distrito" [style]="{'width':'200px'}"></p-column> 
     <p-column [sortable]="true" field="email_corp" header="Email corporativo" [style]="{'width':'180px'}"></p-column> 
     <p-column [sortable]="true" field="email_per" header="Email personal" [style]="{'width':'180px'}"></p-column> 
     <p-column [sortable]="true" field="login" header="Login" [style]="{'width':'120px'}"></p-column> 
     <p-column [sortable]="true" field="contacto_emergencia" header="Contacto de emergencia" [style]="{'width':'180px'}"></p-column> 
     <p-column [sortable]="true" field="telef_contacto" header="Teléfono de Contacto" [style]="{'width':'100px'}"></p-column> 
     <p-column [sortable]="true" field="perfil" header="Perfil" [style]="{'width':'120px'}"></p-column> 
     <p-column [sortable]="true" field="turno" header="Turno" [style]="{'width':'120px'}"></p-column> 
</p-dataTable> 
<p-contextMenu #cm [model]="items"></p-contextMenu> 

を私は次の問題がある:私はレコードを選択すると、選択したとして、これがハイライトされているが、その文脈メニューが遠くに表示されます。 enter image description here

+0

のようにp型のcontextMenuにappendTo =「身体」を追加する必要がありますか?これにより、テンプレートvarをcontextMenuの「アンカー」として割り当てることができます。それが助けになるかもしれない。あなたが行ったことであるかどうか、コンポーネントに間違っているかどうかを特定するのに役立つもう1つのことは、plunkrを使用してコードをテストすることです。 [リンク](http://plnkr.co/edit/Qi2Nw2imLpDUF8NJinYw?p=preview) – BillF

答えて

4

は、あなたがのcon​​textMenuのtargetプロパティを使用して見てきました、ただのcontextMenuのためのショーケースを見て、この

<p-contextMenu #cm [model]="items" appendTo="body" ></p-contextMenu> 
+0

パーフェクト、魅力的な作品! – user1892203

関連する問題