angular - 使用 ngFor 迭代项目数组以创建 NativeScript GridLayout

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，但一切都伴随着它自己的一组特殊问题。

如果有人有任何关于如何使这项工作成功的信息，我将非常感激。

谢谢!

附注我想我应该提到我已经检查了其余代码的有效性。我正在获取我期望的项目等。除了该迭代器之外，一切都正常。

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>

刚刚将 ngFor 从 <template> 移至(或 <ng-template> )到 StackLayout。

仍然不知道为什么我无法获得 <template ngFor>迭代，真的很想知道是否有人可以启发我。但这似乎也同样有效。