模板中的角方法调用

Question

在角模板中，我试图使用ng来加载表的行。我还在某些列中有一些条件内容，这些内容根据其他列的值加载标记。(代码显示在末尾)

我面临的问题是，即使我在这个页面上移动鼠标，在浏览器控制台上我也会多次看到消息"isEligibleForVacDays已执行“。当我多次说的时候，只要在页面上快速移动鼠标，它就能在4秒内超过1000次。

如何避免这种情况&确保只执行一次？我在5处使用类似的ngif='method-call()‘语法。我读到我们可以使用纯管道&我也进行了测试&它没有多次执行。

我想知道解决这个问题的正确办法是什么。谢谢你抽出时间阅读我的问题。

见下文。

单行模板标记

 <mat-cell class="actions center " *matCellDef="let employeeRow">
     <span  *ngIf="isEligibleForVacDays(employeeRow)"
            class="actionIcon"
            (click)="onReloadClick(employeeRow)"
            matTooltip="Eligible for Vacation Days">
            <i class="fa fa-refresh fa-2x" aria-hidden="true"></i>
                </span>
    </mat-cell>

组件类型记录文件中的函数

    isEligibleForVacDays()
{   
    console.log('isEligibleForVacDays executed')
    let isEligibleForVacDays = false;

    some complex logic based on instance variables set on the component

    // finally returning true or false
    return isEligibleForReload;
}

Answer 1

管道只对每个员工执行一次，因此，如果在显示组件时条件不会改变，则非常理想。

来自角文件：

只有在检测到输入值的纯变化时，角才执行纯管道。纯更改要么是对原始输入值(字符串、数字、布尔值、符号)的更改，要么是更改的对象引用(日期、数组、函数、对象)。

唯一要记住的是，如果需要重新计算条件，则需要更改对象引用(即使用Object.assign或扩展)。

Answer 2

解决问题的一个非常简单的方法是将组件的更改检测方法更改为OnPush。

@Component({
  selector: 'app-YOUR-COMPONENT',
  templateUrl: './YOUR-COMPONENT.component.html',
  styleUrls: ['./YOUR-COMPONENT.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})

但是，您将不得不手动地检测这些更改。

constructor( private change: ChangeDetectorRef) {}

isEligibleForVacDays() {
  // do something
  this.change.detectChanges();
}