如何在不创建数组的情况下使用 NgFor 来生成矩阵 UI 模式

Posted 2023-03-05

【中文标题】如何在不创建数组的情况下使用 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 或方法名称应该是mgRepeatref