ein Array von Elementen mit ngFor Iterieren ein NativeScript Gridlayout erstellen

Question

Ich versuche, dieses Tutorial zu folgen:

http://www.blog.bdauria.com/?p=820

Und habe Probleme mit diesem Abschnitt:

<GridLayout #boardGrid 
[columns]="boardSideSpecification" 
[rows]="boardSideSpecification"> 
<template ngFor let-item [ngForOf]="board.squares"> 
    <StackLayout 
    [col]="item.yPosition" 
    [row]="item.xPosition" 
    [class]="classOf(item)"> 
    </StackLayout> 
</template> 

Das Problem ist, dass der ngFor das erste Element ausspuckt, aber nicht weiter unten im Array iteriert. So habe ich am Ende oben mit:

Image for: ngFor only provides first item

und den eigentlichen Code zu erzeugen, dass mit dem Label:

<GridLayout #boardGrid 
      [columns]="boardSideSpecification" 
      [rows]="boardSideSpecification"> 
    <template ngFor let-item [ngForOf]="board.squares"> 
     <StackLayout 
       [col]="item.yPosition" 
       [row]="item.xPosition" 
       [class]="classOf(item)"> 
      <Label text="{{item.xPosition}}, {{item.yPosition}}"></Label> 
     </StackLayout> 
    </template> 
</GridLayout> 

Ich habe zwei Tage lang meinen Kopf gegen die Wand zu schlagen war auf diese versuchen zu finden eine angemessene Lösung. Haben Sie sich angeschaut, sogar das Programm GridLayout zu erstellen, aber alles kommt mit seinen eigenen speziellen Problemen.

Wenn jemand irgendwelche Informationen hat, wie man diese Arbeit macht, wäre ich ewig dankbar.

Dank!

P.S. Ich sollte erwähnen, dass ich die Gültigkeit des restlichen Codes überprüft habe. Ich bekomme die Dinge, die ich erwarte, etc. Es funktioniert alles außer diesem Iterator.

Answer 1

Und für die armen Seelen, die mich auf diesem Weg folgen, hier ist, was ich kam mit dem gearbeitet:

<GridLayout #boardGrid 
      [columns]="boardSideSpecification" 
      [rows]="boardSideSpecification"> 

    <StackLayout 
      *ngFor="let item of board.squares" 
      [col]="item.yPosition" 
      [row]="item.xPosition" 
      [class]="classOf(item)" 
      (tap)="mark(item)"> 
     <Image 
       class="state" 
       [src]="item.state | squareStateImage"></Image> 
    </StackLayout> 


</GridLayout> 

gerade bewegte die ngFor von einem <template> (oder <ng-template>) an die StackLayout.

Ich habe immer noch keine Ahnung, warum ich keine <template ngFor> bekommen konnte, um zu iterieren und würde WIRKLICH wissen wollen, ob mich jemand aufklären könnte. Aber das scheint genauso gut zu funktionieren.