时间戳

首页 > 解决方案 > 带有角度折叠列表视图的 Nativescript

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

问题描述

我正在关注此解决方案折叠列表视图以折叠列表视图。当用户按下隐藏时，我想显示项目的详细信息，当用户按下显示时，我想显示详细信息并显示项目的名称。目前从这个解决方案中，当应用程序加载时，它不显示任何内容。但是当按下隐藏按钮时，会显示详细信息。

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

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

标签： angularnativescript

解决方案

我调整视图来修复它。

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>

推荐阅读