RadList中的图像使用ListViewStaggeredLayout的NativeScript Telerik-UI [英] NativeScript Telerik-UI using ListViewStaggeredLayout for images in RadListView
问题描述
我有一个使用Telerik-UI的NativeScript/Angular2应用程序,当我尝试在RadListView中使用ListViewStaggeredLayout指令显示图像时,出现空白页.使用相同的代码显示文本可以正常工作,即2列和交错的布局.使用ListViewGridLayout来显示图像也可以.我看过旧的Telerik文档,表明可以/可以使用图像,但是我不知道要设置什么. HTML代码如下.谢谢.
I have a NativeScript/Angular2 app using Telerik-UI, when I try to display images using ListViewStaggeredLayout directive in a RadListView I get a blank page. Using same code to display text works OK, i.e. 2 columns and staggered layout. Using ListViewGridLayout to display images works as well. I have seen old Telerik documentation showing this is/was possible with images, but I cannot figure out what to set. The HTML code is below. Thanks.
<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>
推荐答案
您似乎已对tkListItemTemplate
中Image
的src
使用了非Angular 2绑定语法({{ ... }}
).只需将其更改为类似[src]="'res://listview/layouts/' + item.photo + '.jpg'"
之类的文件,所有文件就可以正常工作.甚至最好删除硬编码的res://listview/layouts/
和'.jpg'
并将它们添加到数据项对象的.photo属性",在绑定中使用这种硬编码的字符串不是一个好方法.
It looks like you have used a non Angular 2 binding syntax ( {{ ... }}
) for the src
of the Image
in the tkListItemTemplate
. Simply change it to something like [src]="'res://listview/layouts/' + item.photo + '.jpg'"
and all should be working. Or even better remove the hard coded res://listview/layouts/
and '.jpg'
and add them to "data item object's .photo property", having such hard coded strings in bindings is not a good approach.
我已经使用此模板对此进行了测试,并且可以正常工作:
I have tested this with this template and all works as expected:
<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) {
}
}
这篇关于RadList中的图像使用ListViewStaggeredLayout的NativeScript Telerik-UI的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!