Nativescript/Angular：点击ngFor列表项仅展开对应详情的方法

这个问题很常见——你现在用了一个全局的showDetails布尔变量来控制所有项的展开/隐藏，所以点击任何一项都会触发全局状态的切换，导致所有详情都跟着显示或隐藏。咱们可以通过给每个项单独维护展开状态来解决这个问题，具体修改步骤如下：

1. 替换全局状态变量 #

把组件里的单个showDetails布尔值，改成一个用于记录每个项展开状态的对象：

// 初始化一个空对象，用来存储每个Gerätegröße ID的展开状态
expandedItems = {};

2. 更新collapseInfo函数 #

修改函数逻辑，不再切换全局变量，而是针对点击项的ID单独切换状态：

collapseInfo(geraetegroesseID) {
  console.log("Gerätegröße: " + geraetegroesseID);
  // 切换对应ID的展开状态，如果该ID还没记录状态，默认设为true（展开）
  this.expandedItems[geraetegroesseID] = !this.expandedItems[geraetegroesseID];
}

3. 修改模板中的显示条件 #

把*ngIf的判断条件从全局的showDetails，改成检查当前项ID在expandedItems中的状态：

<ng-container *ngFor="let g of geraetegroessen; let i=index">
  <GridLayout rows="auto, auto">
    <Label row="0" text="{{g.geraetegroesse}}" class="geraetegroessen" (tap)="collapseInfo(g.geraetegroesseID)"></Label>
    <ng-template [ngIf]="expandedItems[g.geraetegroesseID]">
      <Label row="1" text="Hello" class="geraetegroesseninfos"></Label>
    </ng-template>
  </GridLayout>
</ng-container>

这样修改后，每个项的展开状态都是独立管理的，点击某一项时只会切换对应ID的状态，也就只会展开/隐藏该项的详情内容了。

内容的提问来源于stack exchange，提问作者Ferhat Koca