Angolare 2 – NgPer utilizzare numeri invece raccolte

…per esempio…

...

È ansible fare qualcosa come …

 
...

… senza appello a una soluzione non elegante come:

 
...

?

All’interno del componente, è ansible definire un array di numeri (ES6) come descritto di seguito:

 export class SampleComponent { constructor() { this.numbers = Array(5).fill().map((x,i)=>i); // [0,1,2,3,4] this.numbers = Array(5).fill(4); // [4,4,4,4,4] } } 

Vedi questo link per la creazione dell’array: il modo più teso per creare una matrice di numeri interi da 1..20 in JavaScript .

È quindi ansible eseguire iterazioni su questo array con ngFor :

 @Component({ template: ` 
  • {{number}}
` }) export class SampleComponent { (...) }

O a breve:

 @Component({ template: ` 
  • {{number}}
` }) export class SampleComponent { (...) }

No, non esiste ancora alcun metodo per NgFor che utilizza numeri invece raccolte, Al momento, * ngPer accetta solo una raccolta come parametro, ma puoi farlo seguendo i seguenti metodi:

Usando la pipa

pipe.ts

 import {Pipe, PipeTransform} from 'angular2/core'; @Pipe({name: 'demoNumber'}) export class DemoNumber implements PipeTransform { transform(value, args:string[]) : any { let res = []; for (let i = 0; i < value; i++) { res.push(i); } return res; } } 
  • Method First Using PIPE
  • {{key}}

Usare l’array numerico direttamente in HTML (Vedi)

 
  • Method Second
  • {{key}}

Utilizzando il metodo Split

 
  • Method Third
  • {{loop2}}

Utilizzo della creazione di un nuovo array nel componente

 
  • Method Fourth
  • {{i}}
export class AppComponent { demoNumber = 5 ; counter = Array; numberReturn(length){ return new Array(length); } }

Demo di lavoro

Non potevo sopportare l’idea di allocare un array per la semplice ripetizione dei componenti, quindi ho scritto una direttiva strutturale. Nella forma più semplice, che non rende l’indice disponibile per il modello, appare come questo:

 import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core'; @Directive({ selector: '[biRepeat]' }) export class RepeatDirective { constructor( private templateRef: TemplateRef, private viewContainer: ViewContainerRef) { } @Input('biRepeat') set count(c:number) { this.viewContainer.clear(); for(var i=0;i 

http://plnkr.co/edit/bzoNuL7w5Ub0H5MdYyFR?p=preview

Puoi usare lodash:

 @Component({ selector: 'board', template: ` 
{{i}}
`, styleUrls: ['./board.component.css'] }) export class AppComponent implements OnInit { range = _.range(8); }

Non ho provato il codice ma dovrebbe funzionare.

L’ho risolto in questo modo usando Angular 5.2.6 e TypeScript 2.6.2:

 class Range implements Iterable { constructor( public readonly low: number, public readonly high: number, public readonly step: number = 1 ) { } *[Symbol.iterator]() { for (let x = this.low; x <= this.high; x += this.step) { yield x; } } } function range(low: number, high: number) { return new Range(low, high); } 

Può essere utilizzato in un componente come questo:

 @Component({ template: `
{{ i }}
` }) class RangeTestComponent { public r = range(10, 20); }

Controllo degli errori e asserzioni omesse di proposito per brevità (es. Cosa succede se il passo è negativo).

Si prega di trovare allegata la mia soluzione dynamic se si desidera aumentare la dimensione di un array in modo dinamico dopo aver fatto clic su un pulsante (Ecco come sono arrivato a questa domanda).

Assegnazione delle variabili necessarie:

  array = [1]; arraySize: number; 

Dichiarare la funzione che aggiunge un elemento alla matrice:

 increaseArrayElement() { this.arraySize = this.array[this.array.length - 1 ]; this.arraySize += 1; this.array.push(this.arraySize); console.log(this.arraySize); } 

Invoca la funzione in html

   

Iterate attraverso array con ngFor:

 
iterateThroughArray: {{ i }}

Un modo semplice che ho provato

È inoltre ansible creare una matrice nel file del componente e chiamarla con la direttiva * ngFor restituendo una matrice.

Qualcosa come questo ….

 import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-morning', templateUrl: './morning.component.html', styleUrls: ['./morning.component.css'] }) export class MorningComponent implements OnInit { arr = []; i: number = 0; arra() { for (this.i = 0; this.i < 20; this.i++) { this.arr[this.i]=this.i; } return this.arr; } constructor() { } ngOnInit() { } } 

E questa funzione può essere utilizzata nel tuo file modello html

 

value:{{a}} position:{{i}}