NativeScript Repeater 绑定问题 - 垂直显示 [Object object]

Question

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

我有一个 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>

Answer 1

在您的 Repeater 中，您使用的是此处所述的 NativeScript Core 数据绑定语法：https://docs.nativescript.org/core-concepts/bindings#binding-in-xml

然而，当使用 nativeScript + Angular-2 时，绑定语法不同（angular 语法），如下所述：https://docs.nativescript.org/angular/core-concepts/DataBinding.html

这就是您的列表视图绑定有效而您的转发器绑定未产生预期结果的原因。

编辑：Repeater 不会像讨论的那样工作 here（对于 NativeScript+Angular-2，您可以使用 *ngFor 代替）

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

NativeScript Repeater 绑定问题 - 垂直显示 [Object object]

NativeScript Repeater Binding Issue - Showing [Object object] Vertically

android

nativescript

angular2-nativescript