Question

有些人在使用没有集合的ngFor时可能遇到某些情况。看起来好像每个人都喜欢设置变量array并让*ngFor绑定如下代码：

阵列

// typescript

public bignumber:number[]=[1,2,3,4,5,6,7,8,9,10]

//html

<ng-template *ngFor="let item of bignumber | index as i">
  p {{i}}
  <!-- would show ten times -->
</ng-template>

当你想要运行5次或10次而你需要设置新变量然后你可以使用迭代器时，它对模板不友好。所以我想在模板中使用Array新的Array但是它不起作用。无论new Array()或任何您使用关键字Array，它都会解析我们的变量而不是指定关键字。

错误日志

ERROR TypeError：_co.Array不是函数

现在我使用复杂的方法来解决这种情况：

模板

<ng-template [ngForOf]="[].map.call({length:10},[].map).fill('')" let-i="index">
  p {{i}}
  <!-- show 10 times -->
</ng-template>

是否有可能使用像：

这样的清晰代码

[ngForOf]="Array(10).fill()"

Answer 1

AFAIK Angular不支持模板中的Array构造函数。

要解决此问题，您可以尝试以下方法：

仅限模板解决方案

1）String.prototype.repeat()

<ng-container *ngFor="let item of ' '.repeat(2).split(''), let i = index ">
  p {{i}}
</ng-container>

2）使用ngTemplateOutlet

<ng-container *ngTemplateOutlet="tmpl; context: { $implicit: 0 }"></ng-container>


<ng-template #tmpl let-i>
  <div>
    Your template here {{ i }}
  </div>
  <ng-container *ngIf="i < 10">
      <ng-container *ngTemplateOutlet="tmpl; context { $implicit: i + 1 }"></ng-container>
  </ng-container>
</ng-template>

3）使用NgIf

<ng-container *ngIf="1; then tmpl"></ng-container>

<ng-template #tmpl let-i>
  <div>
    Your template here {{ i }}
  </div>
  <ng-container *ngIf="i < 10">
      <ng-container *ngIf="i + 1, then tmpl"></ng-container>
  </ng-container>
</ng-template>

在组件上声明Array属性

您还可以在组件上创建Array属性：

export class AppComponent  {
  Array = Array;
}

然后

<ng-container *ngFor="let item of Array.apply(null, Array(2)), let i = index ">
  p {{i}}
</ng-container>

<br>

<ng-container *ngFor="let item of Array(2).fill(), let i = index ">
  p {{i}}
</ng-container>

<强> Stackblitz Example

您可以随时创建自己的管道：

另见

Repeat HTML element multiple times using ngFor based on a number

在角度模板中解析数组

1 个答案: