Wie kann ich NgFor verwenden, ohne Arrays zu erstellen, um Matrix-UI-Muster zu erstellen

Question

Ich möchte UI-Matrix-Muster implementieren, die dynamisch generieren sollte. Durch Eingabeparameter erhalten, sollten sie entscheiden, was UI Matrixmuster Dimensionen sein würde: Für Elemente Beispiel 9x3: pattern 9x3 elements

I Angular2.js verwenden, Typoskript, SCSS.

html tamplate und .ts aussieht:

import {Component, Input, OnInit} from 'angular2/core'; 
import {NgFor} from 'angular2/common'; 

@Component({ 
    selector : 'game-pattern', 
    moduleId : module.id, 
    templateUrl: 'game-pattern.component.html', 
    styleUrls : ['game-pattern.component.css'], 
    directives : [NgFor], 
}) 
export class GamePatternComponent implements OnInit { 
    @Input('CardType') public cardType: number; 

    public horizontalElementLocation: number; 
    public verticalElementLocation: number; 
    public rows: number[]  = []; 
    public elements: number[] = []; 
    public y: number; 
    public x: number; 

// public cardType = 3; 
constructor() { 
    this.cardType = 3; 
    } 

    public ngOnInit() { 
    console.log('cardType ' + this.cardType); 
    this.chooseGamePattern(); 
    } 

    public chooseGamePattern() { 
    if (this.cardType === 3) { 
     this.horizontalElementLocation = 9; 
     this.verticalElementLocation = 3; 
    } 

    for (this.y = 0; this.y < this.verticalElementLocation; this.y++) { 
     this.rows[this.y] = 0; 
     for (this.x = 0; this.x < this.horizontalElementLocation; this.x++) { 
     this.elements[this.x] = 0; 
     } 
    } 
    } 
} 

<div id="game-pattern" > 
    <div class="pattern-row" *ngFor="#row of rows"> 
    <div class="big-circle" *ngFor="#elemnt of elements"> 
     <div class="small-circle"></div> 
    </div> 
    </div> 
</div> 

** dieser Code nicht mehr in dieser Umgebung ausgeführt werden:) *

Frage: Wie kann ich NgFor verwenden, ohne die Schaffung Arrays zum Generieren von UI. Ich meine, wenn ich Eingang x = 9 und y = 3 erhalten werde, sollte es UI-Matrix-Muster von 9X3 erstellen. Bitte beraten :)

Danke.

Answer 1

Sie können entweder einen Helfer Array erstellen, wie und ngFor über dieses Array zu durchlaufen benutzen mit new Array(count).fill(1) in Repeat HTML element multiple times using ngFor based on a number gezeigt oder Sie können Ihre eigene Strukturrichtlinie wie NgFor implementieren, die ein Array nicht iterieren, sondern eine Zählung als Eingabe verwendet .

Answer 2

Erstellen Sie benutzerdefinierte STRUCTURAL DIRECTIVE, die Vorlage N mal wiederholt.

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

@Directive({ 
    selector: '[mgRepeat]' 
}) 
export class mgRepeatDirective { 
    constructor(
     private _template: TemplateRef, 
     private _viewContainer: ViewContainerRef 
    ) { } 

    @Input('mgRepeat') 
    set times(times: number) { 
     for (let i = 0; i < times; ++i) 
      this._viewContainer.createEmbeddedView(this._template); 
    } 
} 

Verwendung wie folgt

<div id="game-pattern" > 
    <div class="pattern-row" *mgRepeat="verticalElementLocation"> 
    <div class="big-circle" *mgRepeat="horizontalElementLocation"> 
     <div class="small-circle"></div> 
    </div> 
</div> 
</div> 

Answer 3

Nachdem alle Antworten zu lesen ich es geschafft, es zu lösen:

public chooseGamePattern() { 
    if (this.cardType === 3) { 
     this.horizontalElementLocation = 9; 
     this.verticalElementLocation = 3; 
     this.rows = new Array(this.verticalElementLocation); 
     this.elements = new Array(this.horizontalElementLocation); 
    } 

Es funktioniert für mich. Danke euch allen !!!

Answer 4

Der Aufbau von Arrays, nur um über sie zu iterieren, scheint verschwenderisch. DirectivengFor zu ersetzen ist eine Art überflüssig.

<div *ngFor="let i of 30|times">{{ i }}</div> 

für eine Implementierung eines solchen Pipe haben bei my other answer auf Repeat HTML element multiple times using ngFor based on a number einen Blick:

Stattdessen könnten Sie eine Pipe eine Iterable und es so verwenden Rückkehr verwenden.