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

【问题标题】：How to use isArray() in Angular 2+ template?如何在 Angular 2+ 模板中使用 isArray()？
【发布时间】：2026-01-11 23:00:02
【问题描述】：

我有这个变量名为records，

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

在 AngularJS 中我曾经做过以下操作：

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

但是当我尝试执行以下操作时，它不起作用；

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

它给了我以下错误：

TypeError：无法读取未定义的属性“isArray” 有输入吗？

【问题讨论】：

标签： javascript angular typescript

【解决方案1】：

Angular 2 模板在Component 的上下文中执行，也就是说，您只能访问在Component 中定义的属性/方法

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

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

在模板中

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

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

或者，在您的Component 中定义_array 属性并将Array 类型分配给它

  private _array = Array;

在模板中

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

【讨论】：

我们可以在模板中使用私有变量吗？模板不存在于组件类中，而是存在于组件类之外。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

除了@tchelidze 所说的：

Angular 2 在 facade/lang 中提供了一个名为 isArray 的包装器，导出和定义如下：

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)"

【讨论】：

【解决方案4】：

is-array.pipe.ts

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

@Pipe({
  name: 'isArray',
})
export class IsArrayPipe implements PipeTransform {
  transform(
      value: unknown,
  ): boolean {
      return Array.isArray(value);
  }
}

app.component.html

<div *ngIf="selectedCol.model.data | isArray">...</div>

【讨论】：