首页 文章

在listview项目中使用折叠而不是完全删除特定项目视图的空间

提问于
浏览 次
10

  • 在listview项目中，我在布局中使用 Visiblity 概念来执行可见和折叠 . 执行 Collapse 时，listview项目不会完全从布局中删除该视图 .

  • 它正在删除项目内容，例如名称和ID，但在listview中的特定列表项位置放置空白白色视图 .

  • 下面我分享了代码以便更好地理解：

StudentData.ts :

export class StudentData {

constructor(public id: number, public name: string, public collapseData: boolean) {}

} 

student.page.html:

<ListView id="listId" [items]="allFeedItems" class="list-group" height="300">
        <ng-template let-item="item">
            <StackLayout [visibility]="item.collapseData ? 'visible' : 'collapse'" >

                <StackLayout orientation="horizontal">
                <Label class="item-address" text="address"></Label>
            </StackLayout>
                .....

            </StackLayout>
        </ng-template>
    </ListView>

What is happening:

例如：在模态类中，我在hashmap中保存listitems的开关控制值 . 当回到我的主页（即）StudentPage时，我需要完全隐藏特定的行项 . 但它只删除内容名称和ID . 它不会删除该特定列表视图项位置的空白视图 .

What I'm expecting :

删除listview中该特定项目位置的空白视图 .

angular typescript nativescript angular2-nativescript

2 回答

  • 2

    你应该使用不同的模板 -

    <ListView [items]="items" [itemTemplateSelector]="templateSelector">
<template nsTemplateKey="big" let-item="item">
<!-- big item template -->
</template>
<template nsTemplateKey="small" let-item="item">
<!-- small item with image -->
</template>
<template nsTemplateKey="small-no-image" let-item="item">
<!-- small item with no image -->
</template>
</ListView>

    和TS代码 -

    public templateSelector(item: NewsItem, index: number, items: 
NewsItem[]) {
if (item.type === "big") {
return "big"
} 

if (item.type === "small" && item.imageUrl) {
return "small";
}
if (item.type === "small" && item.imageUrl) {
return "small-no-image";
}

throw new Error("Unrecognized template!")
}

    了解更多信息请阅读 - https://medium.com/@alexander.vakrilov/faster-nativescript-listview-with-multiple-item-templates-8f903a32e48f

    回复于
  • 1

    正如dashman的评论中提到的那样 . 我在子stacklayout中添加了可见性，而不是父stacklayout . 然后它没有为特定的listitem采用空白空格 .

    <ng-template let-item="item">
  <StackLayout>

    <StackLayout [visibility]="item.collapseData ? 'visible' : 'collapse'" orientation="horizontal">
      <Label class="item-address" text="address"></Label>
    </StackLayout>
    .....

  </StackLayout>
</ng-template>
    回复于

相关问题