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

gkn4icbw  于 2022-12-14  发布在  TypeScript
关注(0)|答案(4)|浏览(153)

我有一个名为records的变量,
现在我想检查它是否是angular2/typescript中的数组?
在AngularJS中,我经常做以下事情:

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

但是当我试图做以下事情时,它不起作用;

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

它给我下面的错误:
TypeError:无法读取任何未定义输入的属性'isArray'?

5n0oy7gb

5n0oy7gb1#

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

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

在模板中

*ngIf="isArray(selectedCol.model.data)"
  • 为避免样板代码,请使用isArray方法定义服务,注册为Singleton,注入到Component中并通过Service属性使用isArray方法 *
    或者,在Component中定义_array属性并为其分配Array类型
private _array = Array;

在模板中

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

zf2sa74q2#

虽然[].constructor.isArray不是最有效的解决方案(请参阅另一个答案),但它适用于任何表达式上下文,并且不需要用语言级的helper来污染组件类:

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

b4qexyjb3#

除了@tchelidze所说的:
Angular 2在facade/lang中提供了一个名为isArray的 Package 器,导出和定义如下:

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

wixjitnu

wixjitnu4#

是数组.管道.ts

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

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

应用程序.组件.html

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

相关问题