Question

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

Answer 1

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

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

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

编辑：转发器无法按照here的方式工作（对于NativeScript + Angular-2，您可以使用* ngFor代替）

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

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

1 个答案: