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

【问题标题】：How to Expand only one item in collapsible list with NativeScript如何使用 NativeScript 仅展开可折叠列表中的一项
【发布时间】：2020-05-17 06:47:37
【问题描述】：

我已经用 nativescript 构建了一个 RadListview。但是现在我希望如果我点击一个项目，那么只有该项目应该打开，其他扩展项目应该关闭。我关注了这个Creating a collapsible list with NativeScript 并且它有效，我只需要一次扩展一个项目 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>

【问题讨论】：

您链接的原帖已经支持展开单项。如果您有问题，请分享 Playground 示例。
不幸的是，它没有，我会向您展示我的游乐场，但我完全复制了她所做的，如果我弄错了请告诉我，谢谢
我在任何地方都看不到游乐场链接，猜你错过了。
对不起，我是新来的，还在想办法发帖。我现在添加了游乐场
Playground 示例意味着您必须前往play.nativescript.org，添加必要的代码，保存并发布链接。它更像是一个 JS Fiddle，因此其他人将能够运行完全相同的代码并进行调试。

标签： nativescript radlistview

【解决方案1】：

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

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

  }

【讨论】：