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

Luf*_*ffy 10 typescript nativescript angular2-nativescript angular

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

  • 它正在删除名称和ID等项目内容,但在listview中的特定listitem位置放置空白白色视图.

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

StudentData.ts:

export class StudentData {

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

} 
Run Code Online (Sandbox Code Playgroud)

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>        
Run Code Online (Sandbox Code Playgroud)

怎么了:

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

我期待的是:

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

Luf*_*ffy 1

正如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>
Run Code Online (Sandbox Code Playgroud)