[angular] 숫자에 따라 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.

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

다음을 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;
}