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

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

其他答案并不是最好的方法

其他答案建议创建一个组件函数来检查值是否为 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);
  }
}

Answer 3

发生这种情况是因为表达式是根据视图上下文计算的，而不是使用evalJS 全局变量在模板中不可用。

考虑到这Number.isNaN是多填充的，从技术上讲，它可以通过

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

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