在RadListView / ListView中嵌入RadDataForm

时间:2018-01-22 01:01:51

标签: angularjs angular2-nativescript nativescript-telerik-ui

我需要使用nativescript-pro-ui中的Stepper组件,但它不是一个独立的组件,但它需要由RadDataForm包装。 我想要做的是循环从REST API返回的可用菜单列表,供用户订购。

我在这里创建了一个游乐场:https://play.nativescript.org/?template=play-ng&id=vwvuXt

如您所见,我将RadDataForm的[source]绑定到ListView中的单个项目。但是,这样就不会显示RadDataForm。

如果我将其更改为使用* ngFor,则可行。那么,与RadDataForm绑定有什么问题,无论如何都要实现它?

使用* ngFor的模板代码如下:

&

1 个答案:

答案 0 :(得分:1)

请记住我的朋友,您需要使用NativeScript布局来避免所有平台中的错误行为。因此,为了解决您的示例问题,代码如下:

<ListView [items]="menus">
    <ng-template let-item="item">
        <StackLayout>
            <RadDataForm #myDish [source]="item" tkExampleTitle tkToggleNavButton>
                <TKEntityProperty tkDataFormProperty name="name" displayName="Dish Name" index="0">
                    <TKPropertyEditor tkEntityPropertyEditor type="Text">
                    </TKPropertyEditor>
                </TKEntityProperty>
            </RadDataForm>
        </StackLayout>
    </ng-template>
</ListView>

正如您所看到的,我们正在为列表的每个字段使用StackLayout。此外,您可以使用RadListView组件,您可以找到更多高级功能,如无限滚动,拉动刷新等。