使用 ngFor 迭代项目数组以创建 NativeScript GridLayout答案

【问题标题】：Iterating an array of items with ngFor to create a NativeScript GridLayout使用 ngFor 迭代项目数组以创建 NativeScript GridLayout
【发布时间】：2017-06-03 16:59:16
【问题描述】：

我正在尝试学习本教程：

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

如果有人知道如何完成这项工作，我将不胜感激。

谢谢！

附：我想我应该提到我已经检查了其余代码的有效性。我得到了我期望的项目，等等。除了那个迭代器之外，它都在工作。

【问题讨论】：

标签： angular nativescript angular2-nativescript

【解决方案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> 进行迭代，并且真的很想知道是否有人可以启发我。但这似乎也同样有效。

【讨论】：