我有一个使用NativeScript 2.1.0,Angular 2.0.0.rc3和TypeScript 1.8.10的小型测试应用程序设置。我正在Windows上的Android 5.1.1模拟器中运行该项目。
我有一个 ListView 工作,但现在我正在尝试使用以 XML 声明的中继器获取相同的数据输出。我没有获得数据输出,而是看到类似[对象,对象]的东西垂直显示在屏幕中央。
请注意,我的数据数组不是可观察的。它目前是一个对象的 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>
在中继器中,您使用的是 NativeScript Core 数据绑定语法,如下所述: https://docs.nativescript.org/core-concepts/bindings#binding-in-xml
但是,当使用nativeScript + Angular-2时,绑定语法是不同的(角度语法),如下所述 https://docs.nativescript.org/angular/core-concepts/DataBinding.html:
这就是列表视图绑定正常工作且转发器绑定未产生预期结果的原因。
编辑:中继器不会像这里讨论的那样工作(对于NativeScript + Angular-2,你可以使用*ngFor代替)
有关 NativeScript + Angluar-2 中的列表视图绑定的更多信息,请访问:https://docs.nativescript.org/angular/ui/list-view.html#list-view