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

Question

我用 nativescript 构建了一个 RadListview。但现在我希望，如果我点击一个项目，那么只有那个项目应该打开，其他展开的项目应该关闭。我遵循了这个并且它有效，我只需要一次扩展一个项目 enter image description here

谢谢你

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>

Answer 1

如果有人遇到这个问题，只需对所有项目进行扩展属性 false

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

  }

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

How to Expand only one item in collapsible list with NativeScript

radlistview

nativescript