NativeScript Telerik-UI 在 RadListView 中对图像使用 ListViewStaggeredLayout

Question

我有一个使用 Telerik-UI 的 NativeScript/Angular2 应用程序，当我尝试在 RadListView 中使用 ListViewStaggeredLayout 指令显示图像时，我得到一个空白页面。使用相同的代码显示文本可以正常工作，即 2 列和交错布局。使用 ListViewGridLayout 显示图像也可以。我已经看到旧的 Telerik 文档显示了这个 is/was 可以用图像，但我不知道要设置什么。 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>

Answer 1

您似乎对 tkListItemTemplate 中 Image 的 src 使用了非 Angular 2 绑定语法 ( {{ ... }} )。只需将其更改为 [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是这个class:

export class DataItem {
    constructor(public description?: string, public title?: string,  public image?: string) {
    }
}

NativeScript Telerik-UI 在 RadListView 中对图像使用 ListViewStaggeredLayout

NativeScript Telerik-UI using ListViewStaggeredLayout for images in RadListView

telerik-grid

nativescript

nativescript-telerik-ui

angular