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

How can I use NgFor without creating arrays to generate matrix UI pattern

本文关键字：NgFor 模式 UI 创建 数组 情况下      更新时间：2024-06-17

我想实现UI矩阵模式，它应该动态生成。通过接收输入参数，它应该决定什么是UI矩阵模式维度：例如9X3元件：图案9x3元素

我使用Angular2.js，typescript，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矩阵模式。请告知：）

谢谢。

创建自定义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>

构建数组只是为了迭代它们似乎很奢侈。创建一个Directive来替换ngFor有点多余。

相反，您可以使用返回Iterable的Pipe，并像这样使用它：

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

对于这样一个Pipe的实现，请查看我对基于数字使用ngFor多次重复HTML元素的另一个回答。

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

您可以使用ngFor基于数字多次创建一个辅助数组，如Repeat HTML元素中所示，使用new Array(count).fill(1)并使用ngFor迭代该数组，也可以实现自己的结构指令，如ngFor，它不迭代数组，而是使用计数作为输入。

在我的案例中，我想让价格评级动态类似于

"定价：$$$"或"定价：$$"，而不制作数组来重复此"$"

所以我知道我的评分最多是5这对我来说效果很好。

   <ng-container *ngFor="let i of [1, 2, 3, 4, 5] | slice: 0:place.priceRating">
      $
   </ng-container>

价格评级可能从0到5

希望对有所帮助

在阅读了所有答案后，我设法解决了它：

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

它对我有用。谢谢大家！！！

相关文章：