Bir sayıya bağlı olarak ngFor kullanarak HTML öğesini birkaç kez tekrarlayın

*ngForBir HTML öğesini birden çok kez tekrarlamak için nasıl kullanırım ?

Örneğin: 20'ye atanmış bir üye değişkenim varsa, bir div'in 20 kez tekrarlanması için * ngFor direktifini nasıl kullanabilirim?

Aşağıdakileri kullanabilirsiniz:

@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;
}

Veya özel bir boru uygulayın:

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;
}

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

üretir 🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱

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

20Değişkeninizle değiştirin

Önerilen çözümlerin kullanılmasıyla ilgili iki sorun vardır Arrays:

1. Bu savurgan. Özellikle büyük sayılar için.
2. Bunları bir yerde tanımlamalısınız, bu da böylesine basit ve yaygın bir işlem için çok fazla dağınıklığa neden olur.

Bir Pipe(bir kez) tanımlamak daha verimli görünüyor ve şunu döndürüyor 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;
  }
}

Kullanım örneği (dinamik genişlik / yüksekliğe sahip bir ızgara oluşturma):

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

Bunu HTML'nizde basitçe yapabilirsiniz:

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

Ve endekslemek için "sayı" değişkenini kullanın.

Daha basit ve yeniden kullanılabilir bir çözüm, bunun gibi özel yapısal yönergeleri kullanabilir.

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);
    }
  }

}

Ve bunu şu şekilde kullanın:

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

Bunu başarmanın en verimli ve özlü yolu, bir yineleyici yardımcı programı eklemektir. Verici değerler ile uğraşmayın. NgFor yönergesinde bir değişken belirlemeye zahmet etmeyin:

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 kullanıyorsanız , aşağıdakileri yapabilirsiniz:

Lodash'ı bileşeninize aktarın .

import * as _ from "lodash";

Lodash'a başvurmak için bileşen içindeki bir üye değişkeni bildirin.

lodash = _;

Ardından, sizin görüşünüzde aralık işlevini kullanabilirsiniz . 20, bileşeninizdeki herhangi bir değişken ile değiştirilebilir.

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

Görünümdeki işlevlere bağlanmanın, aradığınız işlevin karmaşıklığına bağlı olarak maliyetli olabileceği söylenmelidir, çünkü Değişiklik Algılama işlevi tekrar tekrar çağıracaktır.

Çoğu cevapta önerildiği gibi diziyi doldurmanıza gerek yoktur. Döngünüzde dizin kullanırsanız ngFor, oluşturmanız gereken tek şey doğru uzunlukta boş bir dizidir:

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

ve size göre:

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

Daha basit yaklaşım:

Bir helperArray tanımlayın ve HTML öğelerinizi oluşturmak istediğiniz sayının uzunluğuyla dinamik olarak (veya isterseniz statik olarak) somutlaştırın. Örneğin, sunucudan bazı veriler almak ve döndürülen dizinin uzunluğuna sahip öğeler oluşturmak istiyorum.

export class AppComponent {
  helperArray: Array<any>;

  constructor(private ss: StatusService) {
  }

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

Ardından, HTML şablonumdaki helperArray'i kullanın.

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

Şablonunuzda dizini kullanmanıza izin veren Ilyass Lamrani'nin yapısal yönergesinin biraz geliştirilmiş bir versiyonu:

@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);
    }
  }

}

Kullanım:

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

Bunu özellikle * ngFor kullanarak yapmak istediğini biliyorum, ancak yapısal bir direktif kullanarak bunu çözme şeklimle paylaşmak istedim:

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);
    }
  }
}

Bununla aynen şu şekilde kullanabilirsiniz:

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

Bunu basitçe kullanabilirsiniz:

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 {}
}