如何在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

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

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

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

虽然它可以被认为是一个黑客。我建议将每个辅助函数暴露为类属性或管道。

Answer 2

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

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

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

Answer 3

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

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

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