时间戳

首页 > 解决方案 > 如何使用 NativeScript 仅展开可折叠列表中的一项

nativescript - 如何使用 NativeScript 仅展开可折叠列表中的一项

问题描述

我已经用 nativescript 构建了一个 RadListview。但是现在我希望，如果我点击一个项目，那么只有该项目应该打开，而其他展开的项目应该关闭。我按照这个使用 NativeScript 创建一个可折叠列表并且它可以工作，我只需要一次扩展一个项目在 此处输入图像描述

谢谢你

export class RoadComponent {
    public roads: Array<any>;

    constructor(private page:Page,private router: Router, private roadService: RoadService,private back:BackendService) {
    }
  
    async ngOnInit() {
        this.roads = await this.roadService.getRoads();
    }
   
      templateSelector(item: any, index: number, items: any): string {
        return item.expanded ? "expanded" : "default";
      }
      
      onItemTap(event: ListViewEventData) {
        var listView = event.object as RadListView,
            rowIndex = event.index,
            dataItem = event.view.bindingContext;
            dataItem.expanded = !dataItem.expanded;           listView.androidListView.getAdapter().notifyItemChanged(rowIndex);

      }
      
      }
<Page>
    <StackLayout>
            <RadListView multipleSelection="false" id="abc" height="100%" [items]="roads" [itemTemplateSelector]="templateSelector" class="list-group" (itemTap)="onItemTap($event)">
              <ng-template tkListItemTemplate let-item="item">
              <StackLayout  id="abc" orientation="vertical">
             <Label text="{{item.name}}" class="list-group-item">
                </Label>       
             </StackLayout> 
          </ng-template>
          <ng-template   tkTemplateKey="expanded" let-item="item">
            <GridLayout  rows="auto,auto" columns="*,*" class="list-group-item add-dropdown">
              <Label   row="0" col="0" text="{{item.name}}" class="list-group-item"></Label>
              <Button  row="1" col="0" text="{{item.id}}" (tap)="navigatetomap(item.name)" [nsRouterLink]="['/accueil', { outlets: { homeoutlet: ['home'] } }]"></Button>
              <Button  row="1" col="1" text="{{item.name}}"></Button>
            </GridLayout>

        </ng-template>
        </RadListView>
      </StackLayout>
</Page>

标签： nativescriptradlistview

解决方案

如果有人遇到此问题，只需将扩展属性对所有项目设置为假

onItemTap(event: ListViewEventData) {
    for(let i=0;i<this.roads.length;i++){    
        this.roads[i].expanded=false;
    }
    var listView = event.object as RadListView,
        rowIndex = event.index,
        dataItem = event.view.bindingContext;
        dataItem.expanded = !dataItem.expanded;
       listView.androidListView.getAdapter().notifyItemChanged(rowIndex);

  }

推荐阅读