0

我有一个使用 NativeScript 2.1.0、Angular 2.0.0.rc3 和 TypeScript 1.8.10 的小型测试应用程序设置。我在 Windows 上的 Android 5.1.1 模拟器中运行该项目。

我有一个 ListView 工作,但现在我试图使用 XML 中声明的 Repeater 获得相同的数据输出。我没有得到数据输出,而是看到类似 [Object, Object] 的东西垂直显示在屏幕中央。

请注意,我的数据数组不是可观察的。它目前是一个 Typescript 对象数组。

我没有收到任何错误消息。一切都编译并运行没有错误。

这是我的中继器代码。我究竟做错了什么?

<GridLayout rows="*">
    <!-- this code doesn't work, produces [Object object], in middle of screen -->
    <Repeater items="{{ personList }}" row="1">
        <Repeater.itemsLayout>
            <StackLayout orientation="horizontal"></StackLayout>
        </Repeater.itemsLayout>
        <Repeater.itemTemplate>
                <Label text="{{ FirstName }}" class="medium-spacing"></Label>
        </Repeater.itemTemplate>
    </Repeater>

    <!-- This Code Works
    <ListView [items]="personList" row="1">
        <template let-item="item">
            <GridLayout row="0" columns="80,80">
                <Label col="0" [text]="item.FirstName"></Label>
                <Label col="1" [text]="item.LastName"></Label>
            </GridLayout>
        </template>
    </ListView>
    -->

    <ActivityIndicator [busy]="isLoading" [visibility]="isLoading ? 'visible' : 'collapse'" row="1" horizontalAlignment="center"
        verticalAlignment="center"></ActivityIndicator>
</GridLayout>
4

1 回答 1

3

在您的中继器中,您使用的是 NativeScript Core 数据绑定语法,如下所述:https ://docs.nativescript.org/core-concepts/bindings#binding-in-xml

但是,当使用 nativeScript + Angular-2 时,绑定语法是不同的(角度语法),如下所述:https ://docs.nativescript.org/angular/core-concepts/DataBinding.html

这就是您的列表视图绑定正常工作而您的转发器绑定没有产生预期结果的原因。

编辑:Repeater 不会像这里讨论的那样工作(对于 NativeScript+Angular-2,你可以使用 *ngFor 代替)

有关 NativeScript + Angluar-2 中的列表视图绑定的更多信息:https ://docs.nativescript.org/angular/ui/list-view.html#list-view

于 2016-07-07T12:22:54.487 回答