Website-Suche

javascript - Wie kann ich NgFor verwenden, ohne Arrays zu erstellen, um ein Matrix-Benutzeroberflächenmuster zu erzeugen

Ich möchte ein UI-Matrixmuster implementieren, das dynamisch generiert werden soll. Durch das Empfangen eines Eingabeparameters sollte entschieden werden, welche Dimensionen das UI-Matrixmuster haben würden: Zum Beispiel 9x3 Elemente: Muster 9x3 Elemente

Ich verwende Angular2.js, TypeScript, SCSS.

HTML-Vorlage und .ts sehen aus:

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>

** dieser Code konnte in dieser Umgebung nicht ausgeführt werden :)*

Frage: Wie kann ich NgFor verwenden, ohne Arrays zu erstellen, um die Benutzeroberfläche zu generieren? Ich meine, wenn ich Eingaben x=9 und y=3 erhalte, sollte es ein UI-Matrixmuster von 9X3 erstellen. Bitte um Rat :)

Danke.

Antwort #1

Erstellen Sie eine benutzerdefinierte STRUCTURAL DIRECTIVE, die die Vorlage N Mal wiederholt.

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

Wie folgt verwenden

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

Antwort #2

Arrays nur zu erstellen, um über sie zu iterieren, scheint verschwenderisch. Ein Directive zu erstellen, um ngFor zu ersetzen, ist irgendwie überflüssig.

Stattdessen könnten Sie ein Pipe verwenden, das ein Iterable zurückgibt, und es so verwenden:

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

Für eine Implementierung eines solchen Pipe werfen Sie einen Blick auf meine andere Antwort zum wiederholten HTML-Element mehrfach mit ngFor basierend auf einer Zahl.

Verwandte Artikel