在角度模板中解析数组 [英] parse Array in angular template

问题描述

在没有集合的情况下使用ngFor时可能会遇到一些情况.但似乎每个人都喜欢设置array的变量并让*ngFor 绑定如下代码:

数组

//打字稿public bignumber:number[]=[1,2,3,4,5,6,7,8,9,10]//html<ng-template *ngFor="让 bignumber 的项目 | 索引为 i">p {{i}}<!-- 会显示十次--></ng-模板>

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

错误日志

<块引用>

错误类型错误:_co.Array 不是函数

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

模板

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

是否有可能使用清晰的代码，例如:

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

解决方案

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

要解决此问题，您可以尝试以下操作:

仅模板解决方案

1) [].constructor(10)

2) String.prototype.repeat()

p {{i}}</ng-容器>

3) 使用 ngTemplateOutlet

<ng-container *ngTemplateOutlet="tmpl; context: { $implicit: 0 }"></ng-container><ng-template #tmpl let-i><div>你的模板在这里{{ i }}

<ng-container *ngIf="i < 10"><ng-container *ngTemplateOutlet="tmpl; context { $implicit: i + 1 }"></ng-container></ng-容器></ng-模板>

3) 使用 NgIf

</ng-container><ng-template #tmpl let-i><div>你的模板在这里{{ i }}

<ng-container *ngIf="i < 10"><ng-container *ngIf="i + 1, then tmpl"></ng-container></ng-容器></ng-模板>

在组件上声明数组属性

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

export class AppComponent {数组 = 数组；}

然后

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

Stackblitz 示例

而且您始终可以创建自己的管道:

另见

• 重复 HTML 元素基于一个数字多次使用 ngFor

somebody maybe encounter some situation when use the ngFor without collections.But seems looks like every one like to set the variable of array and let *ngFor binding like following code:

array

// 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>

It's not friendly for template when you want to run 5 times or 10 times and you need to set the new varible then you can iterator.So I want to use Array new Array in template but it didn't work.No matter new Array() or any you would use the keyword Array, it would parse the our variable but not the specify keyword.

error log

ERROR TypeError: _co.Array is not a function

Now I use the complex way to solve this situation:

template

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

Is any possible use the cleary code like:

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

解决方案

AFAIK Angular doesn't support Array constructor in template.

To work around it you could try the following:

Template only solutions

1) [].constructor(10)

2) String.prototype.repeat()

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

3) Using 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) Using 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>

Declaring Array property on component

You can also create Array property on your component:

export class AppComponent  {
  Array = Array;
}

and then

<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

And you can always create your own pipe:

See also

• Repeat HTML element multiple times using ngFor based on a number

这篇关于在角度模板中解析数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！