Question

在角度模板中，我尝试使用ng来加载表的行。我在某些列中也有一些条件内容，它们根据其他列的值加载标记。（最后显示的代码）

我面临的问题是，即使我在此页面上移动鼠标，在浏览器控制台上我也会看到消息＆＃34; isEligibleForVacDays已执行＆＃34;多次。当我说多次时，只需在页面上快速移动鼠标，就可以在4秒内完成超过1000次。

我该如何避免这种情况？确保它只执行一次？我正在使用类似的ngif =＆＃39;方法 - 调用（）＆＃39; 5个地方的语法。我读到我们可以使用纯管道和我也测试了＆amp;它没有多次执行。

我想知道解决此问题的正确方法是什么。感谢您花时间阅读我的问题。

见下文。

一行的模板标记

 <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

管道只会为每个员工执行一次，因此如果在显示组件时条件不会改变，这是理想的。

来自angular documentation:

只有在检测到输入值的纯变化时，Angular才会执行纯管道。纯变化是对原始输入值（String，Number，Boolean，Symbol）的更改或更改的对象引用（Date，Array，Function，Object）。

唯一要记住的是，如果您需要重新评估条件，则需要更改对象引用（即使用Object.assign或spread）

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();
}

模板

2 个答案: