如何在Angular 2+模板中使用isArray()？

Question

我有这个变量命名records,

现在我想在angular2/typescript中检查它是否是一个数组？

在AngularJS中,我曾经做过以下事情:

ng-if="selectedCol.data && !isArray(selectedCol.data)"

但是当我想要做的时候,它不能正常工作;

*ngIf="selectedCol.model.data && !Array.isArray(selectedCol.model.data)"

它给我下面的错误:

TypeError:无法读取未定义任何输入的属性'isArray'吗？

Answer 1

Angular 2模板在内部Component上下文中执行,这意味着,您只能访问内部定义的属性/方法Component

最简单的方法是isArray在你的方法中定义方法Component

isArray(obj : any ) {
   return Array.isArray(obj)
}

在模板中

*ngIf="isArray(selectedCol.model.data)"

要避免样板代码,请使用isArray方法定义Service ,注册为Singleton,通过Service属性注入Component和使用isArray方法

或者,_array在您的中定义属性Component并为其指定Array类型

  private _array = Array;

在模板中

*ngIf="_array.isArray(selectedCol.model.data)"

Answer 2

虽然不是最有效的解决方案（请参见其他答案），但[].constructor.isArray它适用于任何表达式上下文，并且不需要使用语言级帮助程序来污染组件类：

*ngIf="selectedCol.model.data && [].constructor.isArray(selectedCol.model.data)"

Answer 3

除了@tchelidze所说的:

Angular 2提供了一个名为isArrayin 的包装器facade/lang,其定义如下:

export function isArray(obj: any): boolean {
  return Array.isArray(obj);
}

您可以将其导入到组件中,如下所示:

import {isArray} from '@angular/facade/lang';

然后,您可以在组件中公开公开它:

this.isArray = isArray

并在您的模板中使用如下:

*ng-if="selectedCol.data && !isArray(selectedCol.data)"