Iterating an array of items with ngFor to create a NativeScript GridLayout

I'm trying to follow this tutorial:

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

And having problem with this 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>

The problem is that the ngFor spits out the first item but will NOT iterate any further down the array. So I end up with:

Image for: ngFor only provides first item

And the actual code to generate that with 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>

I've been beating my head against the wall for two days on this trying to find a reasonable fix. Have looked at , even programmatically creating the GridLayout but everything comes with it's own special set of problems.

If anybody has any information on how to make this work I'd be ETERNALLY grateful.

Thanks!

P.S. I guess I should mention that I have checked the validity of the rest of the code. I AM getting the items I expect, etc. It's all working except for that iterator.