如何在不创建数组的情况下使用NgFor生成矩阵UI模式
我想实现应该动态生成的UI矩阵模式. 通过接收输入参数,它应该确定什么是UI矩阵模式尺寸: 例如9X3元素: 模式9x3元素
I would like to implement UI matrix pattern, which should generate dynamically. By receiving input parameter it should decide what would be UI matrix pattern dimensions: For example 9X3 elements: pattern 9x3 elements
我使用Angular2.js,打字稿,SCSS.
I use Angular2.js, typescript, SCSS.
html模板和.ts外观:
html tamplate and .ts looks:
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>
**此代码无法在此环境中运行:)*
** this code could not run in this environment :)*
问题: 如何在不创建数组来生成UI的情况下使用NgFor. 我的意思是,如果我将收到输入x = 9和y = 3,则应建立9X3的UI矩阵模式. 请指教:)
Question: How can I use NgFor without creating arrays to generate UI. I mean, if I will receive input x=9 and y=3 it should build UI matrix pattern of 9X3. Please advise :)
谢谢.
创建自定义用法如下
<div id="game-pattern" >
<div class="pattern-row" *mgRepeat="verticalElementLocation">
<div class="big-circle" *mgRepeat="horizontalElementLocation">
<div class="small-circle"></div>
</div>
</div>
</div>