时间戳

首页 > 解决方案 > 基于周期性输入到组件的值的组件动态计算百分比（Angular 8）

angular - 基于周期性输入到组件的值的组件动态计算百分比（Angular 8）

问题描述

我想知道是否有更好的方法来根据输入到组件的值对 Angular 组件执行计算（比我现在所做的）。

我现在正在做的是在一个组件上，我正在调用这样的方法：

<ng-container>
  calculatePercentage(stock.name, stock.paid, stock.quantity, stock.currentPrice)%
</ng-container>

这是一个应用程序，可以显示您的股票在任何特定时刻的价值。

在控制器上，我有一个方法：

calculatePercentage(stock.name, stock.paid, stock.quantity, stock.currentPrice) {
  ...
  return value;
}

该组件通过 API 获取股票的最新价格，并返回 -1% 或 1% 之类的值，以向用户显示他们在特定投资中是赚钱还是亏本。

问题： 当我抛出console.log这个方法时，我发现它会无限触发，即使没有提供更新的值来执行计算。所以这告诉我这不是一种方法。

进行此类计算的最佳方法是什么。只有在提供新值时才应触发它。我必须使用角管道吗？

在此先感谢您的任何建议。

标签： angularcomponents

解决方案

您所看到的是更改检测机制的正常行为。您可以将组件的检测策略更改为 OnPush，是的，我会使用PercentagePipe

import { Component, ChangeDetectionStrategy } from '@angular/core';
...
@Component({
  ...
  changeDetection: ChangeDetectionStrategy.OnPush
})

推荐阅读