マトリックスのUIパターンを生成するために配列を作成せずにNgForを使用するには

Question

動的に生成する必要があるUIマトリックスパターンを実装したいと思います。それはUIマトリックスパターン寸法であるものを決定する必要があり、入力パラメータを受信することによって ： 例えば9X3要素について：私はAngular2.js、typescriptです、SCSS使用 pattern 9x3 elements

。

HTML tamplateと.TSになります

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> 

を**このコードは、この環境では実行できませんでした：）*

質問： はどのように作成することなくNgFor使用することができますが配列を使用してUIを生成します。 私は、入力x = 9とy = 3を受け取ると、9X3のUIマトリックスパターンを構築する必要があります。 お知らせください：

ありがとうございます。

Answer 1

あなたはRepeat HTML element multiple times using ngFor based on a numberに示すようnew Array(count).fill(1)を使用してヘルパー配列を作成し、この配列を反復するngForを使用するかは、配列を反復処理しないNgForのような独自の構造的なディレクティブを実装することができますが、代わりに入力としてカウントを使用しますか、 。

Answer 2

カスタムSTRUCTURAL DIRECTIVEを作成し、テンプレートN回を繰り返します。

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

使用私が管理するすべての答えを読んだ後

<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

を次のようにそれを解決するために：

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

それは私のために動作します。 ありがとうございました！

Answer 4

それらを反復するための配列を構築することは盛んです。 を置き換えるためにDirectiveを作成するのは冗長です。

代わりにあなたがIterableを返すPipeを使用して、このようにそれを使用することができます。このようPipeの実現のために

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

はRepeat HTML element multiple times using ngFor based on a number上my other answerを見ています。