在Angular中使用鼠标悬停ngx-datatable列的列标题时显示文本

Question

我是Angular的新手。我想在鼠标悬停时更改列标题文本。附上快照enter image description here：

下面是我的代码。

 <div *ngIf="configGridParameterVersionResult != null" fxLayout="column">
              <ngx-datatable [fxFlex]="configGridParameterVersionResult.gridHeight"
                  scrollbarV="true"
                  scrollbarH="true"
                  class="material selection-row" 
                  [columnMode]="'force'"
                  [headerHeight]="50"
                  [footerHeight]="50"
                  [rowHeight]="35"
                  [rows]="configGridParameterVersionResult.rows"
                  [selectionType]="'single'"
                  >
                  <ngx-datatable-column name="Equipment" [flexGrow]="1" resizable="false">
                    <ng-template let-value="value" >
                      <span>{{value}}</span>
                    </ng-template>
                  </ngx-datatable-column>
                  **<ngx-datatable-column name="*PDF*" [flexGrow]="1" [width]="60" resizable="false" [cellClass]="getCellClass">
                    <ng-template let-value="value">
                      <span>{{value}}</span>                          
                    </ng-template>
                  </ngx-datatable-column>**

Answer 1

您可以尝试使用mouseenter和mouseleave事件。

(mouseenter)="<<change text>>"
(mouseleave)="<<change text back>>"

使用name="*PDF*"部分并绑定变量而不是修复字符串： name="columnName"然后您也可以在事件处理程序中引用它：(mouseenter)="columnName="My Longer PDF text"等。

所以你的解决方案是这样的：

<ngx-datatable-column 
   [attr.name]="columnName" 
   [flexGrow]="1" 
   [width]="60" 
   (mouseenter)="columnName='hovering text here'"
   (mouseleave)="columnName='PDF'"
   resizable="false" 
   [cellClass]="getCellClass">