迭代與ngFor項目的數組創建NativeScript網格佈局

Question

我想按照這個教程：

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，但一切都伴隨着它自己的特殊問題。

如果任何人有任何關於如何使這項工作的信息，我會非常感激。

謝謝！

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>）移動ngFor到StackLayout。

仍然不知道爲什麼我不能得到一個<template ngFor>迭代，並真的想知道是否有人可以啓發我。但這似乎也起作用。