Встроить RadDataForm в RadListView / ListView

Мне нужно использовать компонент Stepper из nativescript-pro-ui, однако он не является отдельным компонентом, но его нужно обернуть RadDataForm. Я пытаюсь прокрутить список доступных меню, возвращаемых из REST api, чтобы пользователь мог их заказать.

Я создал здесь игровую площадку: https://play.nativescript.org/?template=play-ng&id=vwvuXt

Как видите, я привязываю [источник] RadDataForm к отдельному элементу из 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>

angularjs angular2-nativescript nativescript-telerik-ui
person ngunha02    schedule 22.01.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Помните, мой друг, вам нужно использовать макеты 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. , вы можете найти более продвинутые функции, такие как бесконечная прокрутка, оттягивание для обновления и т. д.

person jdnichollsc    schedule 24.01.2018