Itération un tableau d'éléments avec ngFor pour créer un NativeScript GridLayout

Question

Je suis en train de suivre ce tutoriel:

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

Et problème ayant cette section:

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

Le problème est que le ngFor crache le premier élément mais ne va pas l'itérer plus bas dans le tableau. Donc, je me retrouve avec:

Image for: ngFor only provides first item

Et le code réel pour générer ce avec l'étiquette:

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

J'ai battais ma tête contre le mur pendant deux jours sur ce en essayant de trouver une solution raisonnable. Ont regardé, même en créant par programme le GridLayout mais tout vient avec son propre ensemble spécial de problèmes.

Si quelqu'un a des informations sur la façon de faire ce travail, je serais éternellement reconnaissant.

Merci!

P.S. Je suppose que je devrais mentionner que j'ai vérifié la validité du reste du code. Je reçois les articles que je m'attends, etc. Tout fonctionne sauf l'itérateur.

Answer 1

Et pour ces pauvres âmes qui me suivent dans cette voie, voici ce que je suis venu avec cela a fonctionné:

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

la ngFor Juste Moved d'un <template> (ou <ng-template>) au stackLayout.

Je ne sais toujours pas pourquoi je ne pouvais pas obtenir un <template ngFor> pour itérer et aimerais vraiment savoir si quelqu'un pourrait m'éclairer. Mais cela semble fonctionner aussi bien.