angular - Att använda collapse i listvynsobjekt tar inte bort utrymmet för en specifik objektvy helt

  • I listvysobjekt använder jag Visibility-konceptet i layouten för att göra objekt synliga eller kollapsa dem. När jag utför Collapse tas inte listvysobjekten helt bort från layouten.

  • Det tar bort objektinnehållet såsom namn och ID men placerar en tom vit vy på den specifika listobjektspositionen i listvyn.

  • Nedan har jag delat koderna för bättre förståelse:

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>

Vad som händer:

Till exempel: i modal-klassen sparar jag switchkontrollvärden för listobjekt i hashmap. När jag kommer tillbaka till min huvudsida (dvs) StudentPage, behöver jag dölja det specifika radobjektet helt. Men det tar bara bort innehållets namn och id. Det tar inte bort den tomma vyn för den specifika listvyposten.

Vad jag förväntar mig :

För att ta bort den tomma vyn för den specifika objektpositionen i listvyn.

Svar #1

Du bör använda olika mallar för det -

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

och TS-kod -

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!")
}

för mer information läs här - https://medium.com/@alexander.vakrilov/faster-nativescript-listview-with-multiple-item-templates-8f903a32e48f

Svar #2

som nämnts i kommentaren av dashman. Jag har lagt till synligheten inuti det barn StackLayout istället för förälderns StackLayout. Då tog det inte upp det tomma vita utrymmet för den specifika listobjektet.

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

Relaterade artiklar