问:对于一个整数中的每一个数字，我应该怎么做?

I have an int property named "count" in my component.

我在组件中有一个名为“count”的int属性。

I would like to display a p tag X amount of times, where X is the int my count property equals. Is there really no simple way to do this, besides messing with fake arrays?

我想显示一个p标记X的次数，其中X是我的count属性等于的int数。真的没有简单的方法来做这件事，除了摆弄假的数组吗?

3 个解决方案

#1

Plnkr: https://plnkr.co/edit/Yn775KSbBeUPeyaI9sep?p=preview

Plnkr:https://plnkr.co/edit/Yn775KSbBeUPeyaI9sep?p=preview

You can create another variable called countObservable

您可以创建另一个名为countObservable的变量

  countObservable = Observable.range(0, this.count).toArray();

Use async for in HTML

在HTML中使用异步

  <p *ngFor="let num of countObservable | async" >Hello {{num}}</h2>

Update

更新

If we need to update the number we can use flatMap.

如果我们需要更新数字，我们可以使用flatMap。

Instead of above code for countObservable, use this

使用这个代码代替上面的countObservable代码

count$= new BehaviorSubject(10);
countObservable$ = 
  this.count$.flatMap(count => Observable.range(0, count).toArray()) ;

To change the number value, just update count$

要更改数字值，只需更新count$

this.count$.next(newNum);

#2

You could easily do it with an pipe filter which transforms an empty array to an number of childs depending on a filter param = number.

您可以使用管道过滤器轻松地完成此操作，该过滤器根据过滤器参数param = number将空数组转换为多个childs。

Pipe filter

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

@Pipe({  
    name: 'range',  
    pure: false  
})  

export class RangePipe implements PipeTransform {  
    transform(items: any[], quantity: number): any {  
      items.length = 0;
      for (let i = 0; i < quantity; i++) {
        items.push(i);
      }
      return items;
    }  
}  

View

<div *ngFor="let n of [] | range:100"></div>

#3

I kind of disliked the approach of creating an empty array of size n every time that I wanted to render an element n times, so I created a custom structural directive:

我有点不喜欢每次我想要渲染元素n次时创建一个大小为n的空数组的方法，所以我创建了一个自定义结构指令:

import { Directive, Input, TemplateRef, ViewContainerRef, isDevMode, EmbeddedViewRef } from '@angular/core';

export class ForNumberContext {
  constructor(public count: number, public index: number) { }
  get first(): boolean { return this.index === 0; }

  get last(): boolean { return this.index === this.count - 1; }

  get even(): boolean { return this.index % 2 === 0; }

  get odd(): boolean { return !this.even; }
}

@Directive({
  selector: '[ForNumber]'
})
export class ForNumberDirective {


 @Input() set forNumberOf(n: number) {
    this._forNumberOf = n;
    this.generate();
  }

  private _forNumberOf: number;

  constructor(private _template: TemplateRef<ForNumberContext>,
    private _viewContainer: ViewContainerRef) { }

  @Input()
  set ngForTemplate(value: TemplateRef<ForNumberContext>) {
    if (value) {
      this._template = value;
    }
  }

  private generate() {
    for (let i = 0; i < this._forNumberOf; i++) {
      this._viewContainer.createEmbeddedView(this._template, new ForNumberContext(this._forNumberOf, i));
    }
  }

}

And then u can use it as follows:

然后u可以这样使用:

<ng-template ForNumber [forNumberOf]="count" let-index="index">
<span>Iteration: {{index}}!</span></ng-template>

Please note, I havent tested it extensively so I cant promise that its bulletproof :)

请注意，我还没有对它做过全面的测试，所以我不能保证它的防弹性能: