工具提示连续在angular6中调用该方法

问题描述

在列中，我使用tootip表示状态为关闭。但是工具提示会不断循环该方法，但不会显示 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

解决方法

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

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

@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}}"

管道也必须包含在模块中。