angular - 在 ListView 项目中使用折叠不会完全删除特定项目 View 的空间

Question

• 在 ListView 项目中，我在布局中使用 可见性 概念来执行可见和崩溃。执行 Collapse 时，listview 项目不从布局中完全删除该 View 。

• 它正在删除项目内容，例如 name 和 id，但是在该特定列表项位置放置空白的白色 View 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>        

发生了什么:

例如:在模态类中，我将列表项的开关控制值保存在 HashMap 中。当回到我的主页(即 StudentPage)时，我需要完全隐藏特定的行项目。但它只删除内容名称和 ID。它不会删除该特定 ListView 项位置的空白 View 。

我的期望:

删除 ListView 中特定项目位置的空白 View 。

Answer 1

你应该为此使用不同的模板 -

<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