反復処理NativeScriptのGridLayout

Question

を作成するためのngForと項目の配列

私はこのチュートリアルに従うことをしようとしている：

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

そして、このセクションに問題を持つ：

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

問題は、ngForが最初のアイテムを吐き出しますが、それ以上アレイを繰り返すことはありません。

Image for: ngFor only provides first item

とラベルとそれを生成するために、実際のコード：だから私は、で終わる

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

私が検索しようとし、この上の二日間壁に頭を叩いてきました合理的な修正。 GridLayoutをプログラムで作成したとしても、見てきましたが、すべてにはそれ自身の特別な問題があります。

誰かがこの仕事をする方法に関する情報を持っていれば、私はETERNALLYに感謝するでしょう。

ありがとうございます！

P.S.私は残りのコードの妥当性をチェックしたことに言及しておきたいと思います。私が期待しているアイテムを取得しています。イテレータ以外はすべて動作しています。

Answer 1

そして、このパスを私を従って、これらの貧しい人々の魂のためには、ここで私が働いていたこと思い付いたものです：

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

だけ<template>（または<ng-template>）からStackLayoutにngForを移動しました。

なぜ私は<template ngFor>を繰り返すことができなかったのか分からず、誰かが私を啓発できるかどうかを本当に知りたいのですか？しかし、これはちょうどうまくいくようです。