숫자에 따라 ngFor를 사용하여 HTML 요소를 여러 번 반복

*ngForHTML 요소를 여러 번 반복 하려면 어떻게하나요 ?

예 : 20에 할당 된 멤버 변수가있는 경우 * ngFor 지시문을 사용하여 div를 20 번 반복하려면 어떻게해야합니까?

다음을 사용할 수 있습니다.

@Component({
  (...)
  template: `
    <div *ngFor="let i of Arr(num).fill(1)"></div>
  `
})
export class SomeComponent {
  Arr = Array; //Array type captured in a variable
  num:number = 20;
}

또는 사용자 정의 파이프를 구현하십시오.

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

@Pipe({
  name: 'fill'
})
export class FillPipe implements PipeTransform {
  transform(value) {
    return (new Array(value)).fill(1);
  }
}

@Component({
  (...)
  template: `
    <div *ngFor="let i of num | fill"></div>
  `,
  pipes: [ FillPipe ]
})
export class SomeComponent {
  arr:Array;
  num:number = 20;
}

<div *ngFor="let dummy of ' '.repeat(20).split(''), let x = index">

20변수로 바꾸기

<ng-container *ngFor="let i of [].constructor(20)">🐱</ng-container>

생성 🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱

다음을 사용하는 권장 솔루션에는 두 가지 문제가 있습니다 Arrays.

1. 낭비입니다. 특히 많은 수의 경우.
2. 이러한 간단하고 일반적인 작업을 위해 많은 혼란을 초래하는 어딘가에 정의해야합니다.

다음을 Pipe반환하는 (한 번) 정의하는 것이 더 효율적으로 보입니다 Iterable.

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

@Pipe({name: 'times'})
export class TimesPipe implements PipeTransform {
  transform(value: number): any {
    const iterable = <Iterable<any>> {};
    iterable[Symbol.iterator] = function* () {
      let n = 0;
      while (n < value) {
        yield ++n;
      }
    };
    return iterable;
  }
}

사용 예 (동적 너비 / 높이로 그리드 렌더링) :

<table>
    <thead>
      <tr>
        <th *ngFor="let x of colCount|times">{{ x }}</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let y of rowCount|times">
        <th scope="row">{{ y }}</th>
        <td *ngFor="let x of colCount|times">
            <input type="checkbox" checked>
        </td>
      </tr>
    </tbody>
</table>

HTML에서 간단하게 할 수 있습니다.

*ngFor="let number of [0,1,2,3,4,5...,18,19]"

그리고 변수 "number"를 사용하여 색인을 생성합니다.

더 간단하고 재사용 가능한 솔루션은 이와 같은 맞춤형 구조 지시문을 사용하는 것입니다.

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

@Directive({
  selector: '[appTimes]'
})
export class AppTimesDirective {

  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef) { }

  @Input() set appTimes(times: number) {
    for (let i = 0 ; i < times ; i++) {
      this.viewContainer.createEmbeddedView(this.templateRef);
    }
  }

}

다음과 같이 사용하십시오.

<span *appTimes="3" class="fa fa-star"></span>

이를 달성하는 가장 효율적이고 간결한 방법은 반복자 유틸리티를 추가하는 것입니다. 값을 산출하는 것을 귀찮게하지 마십시오. ngFor 지시문에서 변수를 설정하지 마십시오.

function times(max: number) {
  return {
    [Symbol.iterator]: function* () {
      for (let i = 0; i < max; i++, yield) {
      }
    }
  };
}

@Component({
  template: ```
<ng-template ngFor [ngForOf]="times(6)">
  repeats 6 times!
</ng-template>

```
})
export class MyComponent {
  times = times;
}

Lodash 를 사용 하는 경우 다음을 수행 할 수 있습니다.

Lodash 를 구성 요소로 가져 옵니다 .

import * as _ from "lodash";

Lodash를 참조하도록 구성 요소 내에서 멤버 변수를 선언합니다.

lodash = _;

그런 다음보기에서 범위 기능을 사용할 수 있습니다 . 20은 구성 요소의 모든 변수로 바꿀 수 있습니다.

*ngFor="let number of lodash.range(20)"

Change Detection이 함수를 반복적으로 호출하므로 호출하는 함수의 복잡성에 따라 뷰의 함수에 바인딩하는 데 비용이 많이들 수 있습니다.

대부분의 답변에서 제안한대로 배열을 채울 필요가 없습니다. ngFor루프 에서 인덱스를 사용 하는 경우 올바른 길이의 빈 배열 만 만들어야합니다.

const elements = Array(n); // n = 20 in your case

그리고 당신의 관점에서 :

<li *ngFor="let element in elements; let i = index">
  <span>{{ i }}</span>
</li>

더 간단한 접근 방식 :

helperArray를 정의하고 HTML 요소를 만들려는 개수의 길이로 동적 (원하는 경우 정적)을 인스턴스화합니다. 예를 들어 서버에서 일부 데이터를 가져 와서 반환되는 배열의 길이로 요소를 만들고 싶습니다.

export class AppComponent {
  helperArray: Array<any>;

  constructor(private ss: StatusService) {
  }

  ngOnInit(): void {
    this.ss.getStatusData().subscribe((status: Status[]) => {
      this.helperArray = new Array(status.length);
    });
  }
}

그런 다음 HTML 템플릿에서 helperArray를 사용합니다.

<div class="content-container" *ngFor="let i of helperArray">
  <general-information></general-information>
  <textfields></textfields>
</div>

다음은 템플릿에서 색인을 사용할 수있는 Ilyass Lamrani의 구조적 지시문의 약간 개선 된 버전입니다.

@Directive({
  selector: '[appRepeatOf]'
})
export class RepeatDirective {

  constructor(private templateRef: TemplateRef<any>,
              private viewContainer: ViewContainerRef) {
  }

  @Input()
  set appRepeatOf(times: number) {
    const initialLength = this.viewContainer.length;
    const diff = times - initialLength;

    if (diff > 0) {
      for (let i = initialLength; i < initialLength + diff; i++) {
        this.viewContainer.createEmbeddedView(this.templateRef, {
          $implicit: i
        });
      }
    } else {
      for (let i = initialLength - 1; i >= initialLength + diff ; i--) {
      this.viewContainer.remove(i);
    }
  }

}

용법:

<li *appRepeat="let i of myNumberProperty">
    Index: {{i}}
</li>

* ngFor를 사용하여 특별히 요청한 것을 알고 있지만 구조적 지시문을 사용하여이 문제를 해결 한 방법을 공유하고 싶습니다.

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

@Directive({ selector: '[appRepeat]' })
export class RepeatDirective {
  constructor(private templateRef: TemplateRef<any>, private viewContainerRef: ViewContainerRef) {
  }

  @Input() set appRepeat(loops: number) {
    for (let index = 0; index < loops; ++index) {
      this.viewContainerRef.createEmbeddedView(this.templateRef);
    }
  }
}

이를 통해 다음과 같이 사용할 수 있습니다.

<div *appRepeat="15">
  Testing
</div>

이것을 간단하게 사용할 수 있습니다.

HTML

<div *ngFor="let i of Count">

TS

export class Component implements OnInit {
  Count = [];

  constructor() {
    this.Count.length = 10; //you can give any number
  }

  ngOnInit(): void {}
}