在列表视图项目中使用折叠不会完全删除特定项目视图的空间

Posted 2023-02-19

【中文标题】在列表视图项目中使用折叠不会完全删除特定项目视图的空间

【英文标题】：Using collapse in listview items not removing the space for particular item view entirely

【发布时间】：2017-11-17 23:54:36

【问题描述】：

在列表视图项目中，我在布局中使用Visiblity 概念来执行 可见和崩溃。执行Collapse 时，listview 项目不 从布局中完全删除该视图。

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

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

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" >
        <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 中。当回到我的主页（即学生页面）时，我需要完全隐藏特定的行项目。但它只删除内容名称和 ID。它不会删除该特定列表视图项位置的空白视图。

我的期望：

删除列表视图中该特定项目位置的空白视图。

【问题讨论】：

ng-template ---> ng-container 或将您的 let-item 移动到

@Z.Bagley 得到错误让仅在模板元素中受支持

那是我的错，不太习惯用let-item。一般的问题是 'ng-template' 是内置在 DOM 中的。添加 [hidden]="!item.collapseData" 应该可以解决问题（或只是“item.collapseData”）

@Z.Bagley hidden 对我不起作用。它不会完全删除视图。同样的问题再次发生。

显示渲染到 DOM 的内容可能会有所帮助

【参考方案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

【参考方案2】：

正如dashman 的评论中所述。我在子 stacklayout 而不是父 stacklayout 中添加了可见性。然后它不会为特定的列表项占用空白区域。

<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>