javascript - Hur kan jag använda NgFor utan att skapa arrayer för att generera matris-UI-mönster

Jag skulle vilja implementera ett UI-matrixmönster, som ska genereras dynamiskt. Genom att ta emot en ingångsparameter ska det avgöra vilka dimensioner UI-matrixmönstret ska ha: till exempel 9X3 element: mönster 9x3 element

Jag använder Angular2.js, TypeScript, SCSS.

html-mall och .ts ser ut så här:

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>

** den här koden kunde inte köras i den här miljön :)

Fråga: Hur kan jag använda NgFor utan att skapa arrayer för att generera UI. Jag menar, om jag får input x=9 och y=3 borde det bygga ett UI-matrixmönster på 9X3. Vänligen ge råd :)

Tack.

Svar #1

Skapa en anpassad STRUCTURAL DIRECTIVE som upprepar mallen N gånger.

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

Använd enligt följande

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

Svar #2

Att bygga arrayer bara för att iterera över dem verkar överdådigt. Att skapa en Directive för att ersätta ngFor är lite överflödigt.

Istället kan du använda en Pipe som returnerar en Iterable och använda den så här:

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

För en implementation av en sådan Pipe kan du titta på mitt andra svar om att upprepa HTML-element flera gånger med ngFor baserat på ett nummer.

Relaterade artiklar