首页 文章

使用ListViewStaggeredLayout的NativeScript Telerik-UI用于RadListView中的图像

提问于
浏览 次
0

我有一个使用Telerik-UI的NativeScript / Angular2应用程序，当我尝试在RadListView中使用ListViewStaggeredLayout指令显示图像时，我得到一个空白页面 . 使用相同的代码显示文本工作正常，即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>
angular telerik-grid nativescript nativescript-telerik-ui

1 回答

  • 1

    看起来您在 tkListItemTemplate 中使用了非Angular 2绑定语法（ {{ ... }} ）用于 Image 的 src . 只需将其更改为 [src]="'res://listview/layouts/' + item.photo + '.jpg'" 之类的所有内容即可 . 或者甚至更好地删除硬编码的 res://listview/layouts/ 和 '.jpg' 并将它们添加到"data item object's .photo property"，在绑定中使用这样的硬编码字符串不是一个好方法 .

    我已使用此模板对此进行了测试，并且所有工作都按预期工

    <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) {
    }
}
    回复于

相关问题