将 RadDataForm 嵌入 RadListView/ListView

Question

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

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

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

如果我将其更改为使用 *ngFor，它就可以工作。那么，与RadDataForm的绑定有什么问题，有没有办法实现呢？

使用*ngFor的模板代码是这样的：

<RadDataForm *ngFor="let item of menus" tkExampleTitle tkToggleNavButton [source]="item">
    <TKEntityProperty tkDataFormProperty name="name" [isReadOnly]="isReadOnly" displayName="Name" index="0"></TKEntityProperty>
    <TKEntityProperty tkDataFormProperty name="price" [isReadOnly]="isReadOnly" displayName="Price" index="1"></TKEntityProperty>
    <TKEntityProperty tkDataFormProperty name="image" [isReadOnly]="isReadOnly" displayName="Image" index="2"></TKEntityProperty>
    <TKEntityProperty tkDataFormProperty name="quantity" displayName="Quantity" index="3">
        <TKPropertyEditor tkEntityPropertyEditor type="Stepper"></TKPropertyEditor>
    </TKEntityProperty>
</RadDataForm>

Answer 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 组件，您可以找到更多高级功能，例如无限滚动、下拉刷新等。

将 RadDataForm 嵌入 RadListView/ListView

Embed RadDataForm inside RadListView/ListView

angularjs

angular2-nativescript

nativescript-telerik-ui