0

我需要使用 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>
4

1 回答 1

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

于 2018-01-24T16:39:28.920 回答