Möglichkeit, * ngFor Schleife definierte Anzahl von Malen zu wiederholen, anstatt das Array zu wiederholen? [duplicate]

Lesezeit: 2 Minuten

Gibt es eine Möglichkeit, * ngFor eine definierte Anzahl von Schleifen zu führen, anstatt immer über ein Array iterieren zu müssen?

Zum Beispiel möchte ich, dass sich eine Liste fünfmal wiederholt, die Schleife wäre so etwas wie in C#;

for (int i = 0; i < 4; i++){

}

Erwünschtes Ergebnis:

<ul>
   <li><span>1</span></li>
   <li><span>2</span></li>
   <li><span>3</span></li>
   <li><span>4</span></li>
   <li><span>5</span></li>
</ul>

  • Eine Methode ist wie von @TGH gesagt und die zweite können Sie Ihre for-Schleife wie in Frage erwähnt verwenden und dann den Wert von drücken [i] in einem leeren Array und starte *ngFor auf diesem Array, dies ist auch möglich. Sie können einen dieser beiden Wege wählen.

    – Pardeep Jain

    22. Dezember 2015 um 5:12 Uhr

Benutzer-Avatar
Thierry Templer

Innerhalb Ihrer Komponente können Sie ein Zahlenarray (ES6) wie unten beschrieben definieren:

export class SampleComponent {
  constructor() {
    this.numbers = Array(5).fill(0).map((x,i)=>i);
  }
}

Siehe diesen Link für die Array-Erstellung: Tersest way to create an array of integers from 1..20 in JavaScript.

Sie können dieses Array dann mit iterieren ngFor:

@View({
  template: `
    <ul>
      <li *ngFor="let number of numbers">{{number}}</li>
    </ul>
  `
})
export class SampleComponent {
  (...)
}

Oder kurz:

@View({
  template: `
    <ul>
      <li *ngFor="let number of [0,1,2,3,4]">{{number}}</li>
    </ul>
  `
})
export class SampleComponent {
  (...)
}

Hoffe es hilft dir, Thierry

Bearbeiten: Die Füllanweisung und die Vorlagensyntax wurden korrigiert.

  • Ich denke, die Array(5).fill()... fehlt eine 0. Es sollte sein Array(5).fill(0). Aus den Dokumenten developer.mozilla.org/en/docs/Web/JavaScript/Reference/…

    – brijmcq

    21. Juli 2017 um 15:33 Uhr

  • Das #number sollte sein let number

    – Amr Eladawy

    28. Juli 2017 um 15:55 Uhr

  • Könntest du auch verwenden Array.from(Array(5)).map((x, i) => i ); um dasselbe zu erreichen, ohne es verwenden zu müssen .fill(0)

    – Kern

    27. September 2017 um 12:34 Uhr

  • – Nein Oliel

    20. Mai 2020 um 17:35 Uhr

  • Um genau das zu bekommen, was das OP will (jedes li enthält eine fortlaufende Nummer beginnend mit 1), erweitern Sie die Antwort von @olNoy: <li *ngFor="let e of [].constructor(5); let i = index"><span>{{i+1}}</span></li>

    – Daniel Flippance

    7. Oktober 2020 um 0:06 Uhr


  • 1217260cookie-checkMöglichkeit, * ngFor Schleife definierte Anzahl von Malen zu wiederholen, anstatt das Array zu wiederholen? [duplicate]

    This website is using cookies to improve the user-friendliness. You agree by using the website further.

    Privacy policy