如何在不创建数组的情况下使用 NgFor 来生成矩阵 UI 模式
Posted
技术标签:
【中文标题】如何在不创建数组的情况下使用 NgFor 来生成矩阵 UI 模式【英文标题】:How can I use NgFor without creating arrays to generate matrix UI pattern 【发布时间】:2016-08-05 22:17:20 【问题描述】:我想实现 UI 矩阵模式,它应该是动态生成的。 通过接收输入参数,它应该决定什么是 UI 矩阵模式尺寸: 例如 9X3 元素: pattern 9x3 elements
我使用 Angular2.js、打字稿、SCSS。
html 模板和 .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 矩阵模式。 请指教:)
谢谢。
【问题讨论】:
不要使用与解决问题无关的标签(即,除非您认为 Sass 专家能够帮助您,否则不要使用 [sass] 标签)。 @D.F.嵌套for
循环在这里for (this.x = 0; this.x < ...
有什么意义?
【参考方案1】:
<ng-container *ngFor="let i of [].constructor(20)">
</ng-container>
或
<div *ngFor="let x of 'x '.repeat(lengthFromController + 1).split(' ') let i = index">
i
</div>
或者更好
<ul>
<li>Method Fourth</li>
<li *ngFor='let x of counter(demoLen) ;let i= index'>i</li>
</ul>
export class AppComponent
demoLen = 5 ;
counter = Array;
【讨论】:
【参考方案2】:在我的情况下,我想使价格评级像这样动态
'Price Rating : $$$' 或 'Price Rating : $$' 没有创建一个数组来重复这个“$”
所以我知道我的评分最多为 5 这对我来说效果很好。
<ng-container *ngFor="let i of [1, 2, 3, 4, 5] | slice: 0:place.priceRating">
$
</ng-container>
priceRating 可能从 0 到 5
希望对你有所帮助
【讨论】:
【参考方案3】:构建数组只是为了迭代它们似乎很奢侈。创建Directive
来替换ngFor
有点多余。
相反,您可以使用 Pipe
返回 Iterable
并像这样使用它:
<div *ngFor="let i of 30|times"> i </div>
有关此类Pipe
的实现,请查看Repeat HTML element multiple times using ngFor based on a number 上的my other answer。
【讨论】:
【参考方案4】:阅读所有答案后,我设法解决了它:
public chooseGamePattern()
if (this.cardType === 3)
this.horizontalElementLocation = 9;
this.verticalElementLocation = 3;
this.rows = new Array(this.verticalElementLocation);
this.elements = new Array(this.horizontalElementLocation);
它对我有用。 谢谢大家!!!
【讨论】:
【参考方案5】:您可以使用new Array(count).fill(1)
创建一个如Repeat HTML element multiple times using ngFor based on a number 中所示的辅助数组并使用ngFor
来迭代此数组,或者您可以实现自己的结构指令,如NgFor,它不会迭代数组而是使用计数作为输入。
【讨论】:
【参考方案6】:创建自定义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>
【讨论】:
我一直得到Can't bind to 'mgRepeat' since it isn't a known property of..
,因为我选择省略@Input
旁边的mgRepeat
请注意: @Input
应该有mgRepeat
或方法名称应该是mgRepeat
ref以上是关于如何在不创建数组的情况下使用 NgFor 来生成矩阵 UI 模式的主要内容,如果未能解决你的问题,请参考以下文章
如何在不阻塞主线程的情况下使用 join() 创建多个 C++ 线程?