列表視圖中使用的物品不崩潰消除了對特定項目視圖的空間完全

ListView中的項目我使用的佈局Visiblity概念進行可見和崩潰。執行Collapse時，列表視圖項目不是完全從佈局中刪除該視圖。列表視圖中使用的物品不崩潰消除了對特定項目視圖的空間完全
這是刪除項目內容，如名稱和身份證，但放置空白視圖在該特定listitem位置 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中listitems的開關控制值。當回到我的主頁（即StudentPage）時，我需要完全隱藏特定的行項目。但它只是刪除內容名稱和ID。它不會刪除該特定列表視圖項目位置的空白視圖。

我很期待：

若要刪除列表視圖中的特定項目位置的空白視圖。

來源

2017-06-15 Steve

'NG-template' - - >'ng-container'或者將你的let-item移動到 –

@ Z.Bagley出錯僅在模板元素中受支持 – Steve

這是我的不好，不習慣使用let-item。一般的問題是'ng-template'內置於DOM中。添加[hidden] =「！item.collapseData」應該做的伎倆（或只是「item.collapseData」） –

正如評論中提到的dashman。我在子堆棧佈局中添加了可見性，而不是父堆棧佈局。然後它不會爲特定的列表項佔用空白空間。

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

來源

2017-09-11 10:57:16 Steve

你應該使用不同的模板爲 -

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

來源

2017-09-13 11:13:53 Dlucidone

列表視圖中使用的物品不崩潰消除了對特定項目視圖的空間完全

回答

相關問題