Angular中如何在ngFor内实例化并复用数组？

嘿，我懂你碰到的麻烦了——想直接在HTML模板里给*ngFor定义数组用，不想在.ts文件里写，结果用let arr = ['foo', 'bar', 'sla']; let item of arr这种写法触发了[object Object]错误对吧？

为什么会报错？ #

Angular的*ngFor指令语法有严格的规则，它的标准结构是：

*ngFor="let 迭代项 of 可迭代数据源; 可选导出变量（如let i=index）"

你尝试在指令表达式里直接声明并赋值数组变量arr，这种写法并不符合*ngFor的语法规范，Angular无法正确解析这个表达式，最终抛出了那个模糊的[object Object]错误（底层是语法解析失败导致的Promise处理异常）。

不用.ts文件定义数组的解决方案 #

这里有两种简单的方法可以实现你想要的效果，完全不用在组件类里定义数组：

方法1：用ng-container+*ngIf创建模板局部变量（推荐）

通过*ngIf="数组 as 变量名"的方式，在模板里创建一个局部变量，然后就能在ng-container内部复用这个数组了：

<ng-container *ngIf="['foo', 'bar', 'sla'] as arr">
  <div *ngFor="let item of arr; let i = index;">
    {{ i }}: {{ item }}
  </div>
</ng-container>

ng-container是Angular的无渲染容器，不会在DOM里生成额外元素，刚好适合用来创建这种局部变量。

方法2：自定义管道返回固定数组

如果需要在多个地方复用这个数组，可以写一个简单的管道：
首先创建管道类：

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

@Pipe({ name: 'myFixedArray' })
export class MyFixedArrayPipe implements PipeTransform {
  transform(): string[] {
    return ['foo', 'bar', 'sla'];
  }
}

记得在模块里声明这个管道，然后在模板里使用：

<div *ngFor="let item of [] | myFixedArray; let i = index;">
  {{ i }}: {{ item }}
</div>

不过这种方法适合数组需要多处复用的场景，如果只是单个地方用，方法1更轻便。

内容的提问来源于stack exchange，提问作者li x