时间戳

首页 > 解决方案 > Angular - 为什么我的简单函数被多次调用？

javascript - Angular - 为什么我的简单函数被多次调用？

问题描述

我有一个简单的表格，ngFor用于显示行。

app.component.html

<table>
    <thead>
        <tr>
            <th>Header 1</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let item of items">
            <td>
                <a>{{myFunc(item?.id) ? "1" : "2"}}</a>
            </td>
        </tr>
    </tbody>
</table>

items是一个有一个对象的列表。我希望只对列表中的一个对象进行一次myFunc()评估。但是，似乎被调用了4 次，我不知道为什么。itemsmyFunc()

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  items = [{"id": 1}];

  myFunc(itemId) {
    console.log("i was called");
    return true;
  }
}

显示此错误的演示：https ://stackblitz.com/edit/angular-j7jgfl 。“我被称为”被打印到控制台 4 次。谁能告诉我为什么以及一次调用该函数的正确方法是什么？

标签： javascriptangular

解决方案

在控制台中，您可以看到以下消息：

Angular 正在开发模式下运行。调用 enableProdMode() 以启用生产模式。

这意味着，Angular 在每个周期之后在开发模式下重新运行更改检测，并检查在第二次之后没有任何变化。如果是这样，将显示警告，因为如果不重新运行，可能无法在生产中检测到这些更改。

如果您在引导之前enableProdMode();在文件中运行main.ts（您必须在 Stackblitz 中刷新一次），您会看到该函数的调用频率只有一半，剩下两次。

使用默认值时，更改检测将出于许多不同的原因运行ChangeDetectionStrategy。每次您的函数都会被评估。如果您希望更改检测只运行一次，请将 更改ChangeDetectionStrategy为OnPush：

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

更改检测现在仅在@Input值更改（对象引用）或触发事件时运行。

推荐阅读