带有角度折叠列表视图的Nativescript

Question

我按照这个解决方案折叠列表视图来折叠列表视图。当用户按隐藏时，我想显示项目的详细信息，当用户按显示时，我要显示项目的细节和名称。目前，从这个解决方案来看，当加载应用程序时，它不会显示任何内容。但当按下隐藏按钮时，会显示详细信息。

我要做的是在加载应用程序时显示名称，当用户按下隐藏键时，我想隐藏名称并显示详细信息。

<GridLayout>
<ListView [items]="items">
<ng-template let-item="item">
<GridLayout class="list-group-item" columns="*,auto">
<Label col="0" textWrap="true" [text]="item.details" [visibility]="item.visible ? 'collapse' : 'visible'"></Label>
<Label col=1 text ="show" [text]="item.visible ? 'hide' : 'show'" (tap)="toggle(item)"></Label>
</GridLayout>
</ng-template>
</ListView>
</GridLayout>

export class Item{
id: number;
name: string;
details: string;
visible: boolean;
}

toggle(item: Item) {
item.visible = !item.visible;
//item.visible = false;
}

Answer 1

我调整视图以修复它。

GridLayout>
<ListView [items]="details">
<ng-template let-item="item">
<GridLayout class="list-group-item" columns="*,auto">
<Label col="0" textWrap="true" [text]="item.details" [visibility]="item.visible ? 'collapse' : 'visible'"></Label>
<Label col="0" textWrap="true" [text]="item.title" [visibility]="item.visible ? 'visible' : 'collapse'"></Label>
<Label col=1 text ="show" class="fas" [text]="item.visible ? '&#xf067;' : '&#xf068;'" (tap)="toggle(item)"></Label>
</GridLayout>
</ng-template>
</ListView>
</GridLayout>