Question

当我尝试这样做时：

dividerColor="{{isNaN(+price) ? 'warn' : 'primary'}}"

它给了我这个错误：

browser_adapter.ts:82 ORIGINAL EXCEPTION: TypeError: self.context.isNaN is not a function

如何检查我的对象在Angular2表达式中是否不是数字？

Answer 1

您可以将该函数公开为该类的属性：

class MyComponent {
  isNaN: Function = Number.isNaN;
}

<div>dividerColor="{{isNaN(+price) ? 'warn' : 'primary'}}"</div>

Answer 2

这是因为表达式是针对视图上下文计算的，而不是eval，模板中没有JS全局变量。

考虑到Number.isNaN是polyfilled，从技术上讲，它可以用

完成

{{ (+price).constructor.isNaN(+price) ... }}

虽然它可以被视为黑客攻击。我建议将每个辅助函数公开为类属性或管道。

Answer 3

不是在组件中公开isNan函数并在模板中应用某些规则，我认为公开具有商业意义的属性是更好的选择。例如：

class MyComp {
  hasPrice: boolean;
  someAction() {
    ...
    this.hasPrice = !isNaN(this.item.price);
  }
}

<div dividerColor="{{hasPrice ? 'warn' : 'primary'}}"></div>

Answer 4

这可以被认为是一种hack，但是在模板中使用起来确实很简单。 NaN如此特别，以至于它与所有事物甚至与自身都不相同，即（NaN == NaN）始终为false。

这样就可以了：

dividerColor = "{{price !== price? 'warn': 'primary'}}"

除了NaN外，其他都没有。

Answer 5

其他答案不是最好的方法

其他答案建议创建一个组件函数来检查该值是否为NaN，如：

*ngIf="myCustomIsNaN(value)"

据我所知，此方法是 Angular中的问题，因为您正在调用一个函数来检查值。因此，更改检测器将继续调用该函数以检查返回的值是否已更改。如果将console.log放在该函数中，则会看到它每秒被调用1到10次，从而重新呈现模板。

我认为做到这一点的唯一好方法是使用自定义管道。

为什么管道是更好的解决方案

请考虑以下模板代码：

<div *ngIf="value | isNan"> ... </div>

在这种情况下，如果value发生更改，更改检测器将仅仅触发重新渲染。然后然后评估ngIf语句并相应地重新呈现模板。

更少的调用，更少的渲染，更少的cpu利用率，更高的性能。：）

管道代码

为了使模板更加美观，我创建了两个管道来检查NaN：isNaN和isNotNaN

import { Pipe, PipeTransform } from '@angular/core';

/**
 * Pipe to return true if the number is NaN
 */
@Pipe({
  name: 'isNaN'
})
export class IsNaNPipe implements PipeTransform {
  transform(item: number): boolean {
    return isNaN(item);
  }
}

/**
 * Pipe to return true if the number is NOT NaN
 */
@Pipe({
  name: 'isNotNaN'
})
export class IsNotNaNPipe implements PipeTransform {
  transform(item: number): boolean {
    return !isNaN(item);
  }
}

如何在Angular2表达式中检查isNaN？

5 个答案:

其他答案不是最好的方法

为什么管道是更好的解决方案

管道代码