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

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

我试图寻找一个合理的解决办法，我已经在墙上撞了两天。看过，甚至以编程方式创建了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>

刚刚将ngFor从<template>（或<ng-template>）移到了StackLayout。

仍然不知道为什么我无法进行<template ngFor>迭代，并且真的想知道是否有人可能启发我。但这似乎同样有效。

使用ngFor迭代一系列项目以创建NativeScript GridLayout

1 个答案: