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

问题

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.

回答1:

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>

回答2:

Building arrays just to iterate over them seems lavish. Creating a Directive to replace ngFor is sort of redundant.

Instead you could use a Pipe returning an Iterable and use it like this:

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

For an implementation of such a Pipe have a look at my other answer on Repeat HTML element multiple times using ngFor based on a number.

回答3:

You can either create an helper array like shown in Repeat HTML element multiple times using ngFor based on a number using new Array(count).fill(1) and use ngFor to iterate over this array or you can implement your own structural directive like NgFor that doesn't iterate over an array but instead uses a count as input.

回答4:

After reading all answers I managed to solve it:

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

It works for me. Thank You all!!!

回答5:

In my case i wanted to make a price rating dynamic something like this

'Price Rating : $$$' or 'Price Rating : $$' without making an array to repeat this "$"

so i knew that my rating is 5 at most and this working well for me .

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

priceRating maybe from 0 to 5

hope that help

来源：https://stackoverflow.com/questions/36621771/how-can-i-use-ngfor-without-creating-arrays-to-generate-matrix-ui-pattern