NativeScript Telerik-UI с использованием ListViewStaggeredLayout для изображений в RadListView

У меня есть приложение NativeScript/Angular2 с использованием Telerik-UI, когда я пытаюсь отобразить изображения с помощью директивы ListViewStaggeredLayout в RadListView, я получаю пустую страницу. Использование того же кода для отображения текста работает нормально, то есть 2 столбца и расположение в шахматном порядке. Использование ListViewGridLayout для отображения изображений также работает. Я видел старую документацию Telerik, показывающую, что это возможно с изображениями, но я не могу понять, что нужно установить. HTML-код ниже. Спасибо.

<RadListView [items]="pictures">
    <template tkListItemTemplate let-item="item">
        <GridLayout>
            <Image col="0" src="{{ 'res://listview/layouts/' + item.photo + '.jpg' }}" stretch="aspectFill" loadMode="async"></Image>
            <!-- <Label col="0" [text]="item.title" textWrap="true"></Label> -->
        </GridLayout>
    </template>
    <ListViewStaggeredLayout tkListViewLayout scrollDirection="Vertical" spanCount="2" itemWidth="180"></ListViewStaggeredLayout>
    <!-- <ListViewGridLayout tkListViewLayout scrollDirection="Vertical" itemHeight="200" spanCount="2"></ListViewGridLayout> -->
</RadListView>

nativescript angular telerik-grid nativescript-telerik-ui
person Larry King    schedule 03.11.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Похоже, вы использовали синтаксис привязки не Angular 2 ( {{ ... }} ) для src из Image в tkListItemTemplate. Просто измените его на что-то вроде [src]="'res://listview/layouts/' + item.photo + '.jpg'", и все должно работать. Или, что еще лучше, удалите жестко закодированные res://listview/layouts/ и '.jpg' и добавьте их в «свойство .photo объекта элемента данных», поскольку такие жестко закодированные строки в привязках не являются хорошим подходом.

Я проверил это с этим шаблоном, и все работает так, как ожидалось:

<GridLayout>
    <RadListView [items]="staggeredItems">
        <template tkListItemTemplate let-item="item">
            <GridLayout class="listItemTemplateGrid">
                <Image [src]="item.image" stretch="aspectFill"></Image>
                <GridLayout verticalAlignment="bottom">
                    <StackLayout class="labelsStackLayout">
                        <Label [text]="item.title"></Label>
                        <Label [text]="item.description"></Label>
                    </StackLayout>
                </GridLayout>
            </GridLayout>
        </template>

        <ListViewStaggeredLayout tkListViewLayout scrollDirection="Vertical" spanCount="3"></ListViewStaggeredLayout>
    </RadListView>
</GridLayout>

staggeredItems относятся к этому классу:

export class DataItem {
    constructor(public description?: string, public title?: string,  public image?: string) {
    }
}
person Vladimir Amiorkov    schedule 04.11.2016
comment
Спасибо Владимир. Я пробовал угловой способ [src]=item.image, но, согласно вашим комментариям, я буду придерживаться его. Попробовав ваш код напрямую, я понял, что свойство loadMode='async' в теге изображения создает проблему. Когда я удаляю его из шахматного макета, изображения отображаются правильно, но при включении представление остается пустым. Я хочу использовать loadMode='async', потому что прокрутка и поток изображений при начальной загрузке более плавные. Без loadMode='async' первый раз прокрутка изображений немного глючит, но после этого прокручивается плавно. Любые идеи о loadMode с шахматной компоновкой? - person Larry King; 04.11.2016