2017-11-02 3 views
-1

Ich benutze PrimeNg und ich habe eine Datentabelle. Wenn ich den Mauszeiger über die Zeile/Zelle halte, möchte ich den Inhalt dieser Zelle in einem pTooltip anzeigen. Wenn ich das tue:Angular 4 Display pTooltip wird nicht angezeigt

{{statement.description}} 

Die Tabelle wird nicht angezeigt. Wenn ich das tue:

statement.description 

Die Tabelle zeigt aber die pTooltip zeigt nur den Text "statement.description".

Dies ist die Datentabelle Code in der Vorlage:

<p-dataTable [globalFilter]="gb" [value]="statements" [paginator]="true" [rows]="3" selectionMode="single" id="dtt" [(selection)]="selectedStatement" (onRowClick)="selectOverlay($event, statement, op)" (onRowDblclick)="onRowSelect($event)"> 
     <p-header> 
     Statements from this source 
     </p-header> 
     <p-column field="description" header="Description"> 
      <ng-template let-col let-row="rowData" let-ri="rowIndex" pTemplate="body" > 
       <span #z>{{ row[col.field] | truncate:[150] }}<i tabindex="0" class="fa fa-ellipsis-h" aria-hidden="true" tooltipEvent="focus" tooltipPosition="top" pTooltip="{{statement.description}}"></i></span> 
      </ng-template> 
     </p-column> 
     <p-column [style]="{'width': '1.5em'}"> 
      <ng-template let-col let-row="rowData" let-ri="rowIndex" pTemplate="body"> 
       <span><i class="icon-unlink"></i></span> 
      </ng-template>  
     </p-column> 
    </p-dataTable> 

Antwort

1

[pTooltip]="statement.description" Versuchen (mit den eckigen Klammern)

0

Wie Milo es [pTooltip]="statement.description" weist darauf hin,

Sie nur {{statement.description}} verwenden können, sollten zwischen Tags. Zum Beispiel <div>{{value}}</div>

Wenn Sie ein Objekt an eine Property binden möchten, verwenden Sie [property]="myObject".

Wenn Sie Text an eine Property binden möchten, verwenden Sie [property]="'myString'" oder property="test".

+0

Wenn ich das mache bricht es die Datentabelle (nichts zeigt) – azmatrix

Verwandte Themen