Tooltip 不断调用角度 6 中的方法

Question

在列中，我正在使用提示，因为状态已关闭。但是工具提示不断循环该方法并且不显示 matTooltip="{{getdownReason(row.id,row.ip,row.status)}}"

 <ng-container matColumnDef="state">
            <mat-header-cell *matHeaderCellDef mat-sort-header disableClear class="statusColumn"> Status</mat-header-cell>
            <mat-cell  *matCellDef="let row" class="statusColumn"  matTooltip-append-to-body="true"  >&nbsp;
               <span  *ngIf="row.status === 'available'.toUpperCase(); else statusInfo"><i class="icon-circle colorCircle Green"   ></i></span>
              <ng-template #statusInfo><span *ngIf="row.status === 'reserved'.toUpperCase(); else statusWarning"><i class="icon-circle colorCircle Blue"></i></span></ng-template>
              <ng-template #statusWarning><span *ngIf="row.status === 'supervising'.toUpperCase(); else statusDanger"><i class="icon-circle colorCircle Orange"></i></span></ng-template>
              <ng-template  #statusDanger><span *ngIf="row.status === 'down'.toUpperCase(); else statusElse;"  ><i class="icon-circle colorCircle Red" matTooltip="{{getdownReason(row.id,row.ip,row.status)}}"  ></i></span></ng-template>
              <ng-template #statusElse><span style="position: center"><i class="icon-circle colorCircle" style="color: #7f7f86"></i></span></ng-template>
            </mat-cell>
          </ng-container>
    ```
    Anyone help me on this


  [1]: https://i.stack.imgur.com/pFF6x.png

Expected Result: when mouse over on icon Tooltip will call get request api and show the message

Answer 1

每次更改检测运行时都会调用模板中的函数，对于典型的 Angular 应用程序来说是每隔几毫秒运行一次。

这里更好的选择是使用管道。管道仅在其输入与函数不同时才会执行。

@Pipe({
    name: 'downReason', pure: true
})
export class GetdownReasonPipe implements PipeTransform {

    public transform({id, ip, status}): string {

        const tooltip: string = "";  //fill in as needed
        
        return tooltip;
    }
}

然后，像这样使用那个管道

matTooltip="{{ row | downReason}}"

管道也需要包含在您的模块中。