如何在不创建数组的情况下使用 NgFor 来生成矩阵 UI 模式 [英] How can I use NgFor without creating arrays to generate matrix UI pattern

问题描述

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

我使用 Angular2.js、打字稿、SCSS.

html 模板和 .ts 外观:

import {Component, Input, OnInit} from 'angular2/core';从'angular2/common'导入{NgFor}；@成分({选择器:'游戏模式'，moduleId : 模块.id,templateUrl: 'game-pattern.component.html',styleUrls : ['game-pattern.component.css'],指令:[NgFor]，})导出类 GamePatternComponent 实现 OnInit {@Input('CardType') public cardType: number;公共水平元素位置:数字；公共垂直元素位置:数字；公共行:编号[] = [];公共元素:number[] = [];公共 y:号码；公众x:号码；//公共卡类型 = 3;构造函数(){this.cardType = 3;}公共 ngOnInit() {console.log('cardType ' + this.cardType);this.chooseGamePattern();}公共选择游戏模式(){如果(this.cardType === 3){this.horizo​​ntalElementLocation = 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.horizo​​ntalElementLocation; this.x++) {this.elements[this.x] = 0;}}}}

<div id="game-pattern" ><div class="pattern-row" *ngFor="#row of rows"><div class="big-circle" *ngFor="#element of elements"><div class="small-circle"></div>

** 此代码无法在此环境中运行 :)*

问题:如何在不创建数组的情况下使用 NgFor 来生成 UI.我的意思是，如果我将收到输入 x=9 和 y=3，它应该构建 9X3 的 UI 矩阵模式.请指教:)

谢谢.

解决方案

创建自定义 STRUCTURAL DIRECTIVE 重复模板 N 次.

import {TemplateRef, ViewContainerRef, Directive, Input} from 'angular2/core';@指示({选择器:'[mgRepeat]'})导出类 mgRepeatDirective {构造函数(私有_template:TemplateRef，私有_viewContainer:ViewContainerRef) { }@Input('mgRepeat')设置时间(次数:数量){for (让 i = 0; i <次; ++i)this._viewContainer.createEmbeddedView(this._template);}}

如下使用

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

I use Angular2.js, typescript, SCSS.

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 :)*

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 :)

Thanks.

解决方案

Create custom STRUCTURAL DIRECTIVE which repeats template N times.

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

Use as follows

<div id="game-pattern" >
  <div class="pattern-row" *mgRepeat="verticalElementLocation">
     <div class="big-circle" *mgRepeat="horizontalElementLocation"> 
        <div class="small-circle"></div>
     </div>
 </div>
</div>

这篇关于如何在不创建数组的情况下使用 NgFor 来生成矩阵 UI 模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！