CODEWITHSUNDEEP
angularnativescriptangular2-nativescript
Gerald Anderson
Gerald Anderson

Reputation: 91

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.

Upvotes: 3

Views: 1635

Answers (1)

Gerald Anderson
Gerald Anderson

Reputation: 91

And for those poor souls that follow me down this path, here's what I came up with that worked:

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

Just Moved the ngFor from a <template> (or <ng-template>) to the StackLayout.

Still have no clue why I couldn't get a <template ngFor> to iterate and would REALLY like to know if anybody could possibly enlighten me. But this seems to work just as well.

Upvotes: 6

Related Questions