如何在Ionic的ngFor手风琴列表中实现点击仅展开单个项

这个问题很典型——你现在用了一个全局的testHiding布尔变量来控制所有列表项的展开/收起状态，所有项都绑定同一个变量，自然一点击就会全部同步变化。咱们来一步步修改代码，让每个列表项拥有独立的展开状态：

第一步：修改swapi.page.ts #

我们需要移除全局的状态变量，改为给每个搜索结果的人物对象添加独立的展开状态属性，同时拆分搜索和状态切换的逻辑：

import { Component, OnInit } from '@angular/core';
import { SwapiserviceService } from '../swapiservice.service';
import { HttpClient } from '@angular/common/http';
import { environment } from 'src/environments/environment';

@Component({
  selector: 'app-swapi',
  templateUrl: './swapi.page.html',
  styleUrls: ['./swapi.page.scss'],
})
export class SwapiPage implements OnInit {
  swapiPeople: any;
  swapiSearch: string; // 声明搜索变量，确保双向绑定正常工作

  constructor(public myService: SwapiserviceService, public http: HttpClient) {}

  ngOnInit() {
  }

  // 单独处理搜索逻辑
  searchPeople() {
    this.http.get(`${environment.swapiUrlBase}people/?search=${this.swapiSearch}`).subscribe((data: any) => {
      // 给每个搜索结果添加独立的展开状态属性，默认收起
      this.swapiPeople = data.results.map(people => ({
        ...people,
        isExpanded: false
      }));
      console.log(this.swapiPeople);
    });
  }

  // 切换单个项的展开/收起状态
  toggleExpand(people: any) {
    people.isExpanded = !people.isExpanded;
    console.log(`${people.name} 的展开状态: ${people.isExpanded}`);
  }
}

第二步：修改swapi.page.html #

把点击事件改为触发单个项的状态切换，同时把展开/收起的判断绑定到当前项的isExpanded属性：

<ion-header class="header" background-color="orange">
  <ion-toolbar color="danger">
    <ion-buttons slot="start">
      <ion-menu-button autoHide="false"></ion-menu-button>
    </ion-buttons>
    <ion-searchbar [(ngModel)]="swapiSearch" name="swapiSearch" placeholder="Search DropDown Starwars" (ionChange)="searchPeople()" debounce=1000>
    </ion-searchbar>
  </ion-toolbar>
</ion-header>

<ion-content color="creame">
  <ion-card>
    <ion-list *ngFor="let people of swapiPeople">
      <!-- 点击当前项时，传入当前人物对象切换状态 -->
      <ion-item (click)="toggleExpand(people)">
        <label>{{people.name}}</label>
      </ion-item>
      <!-- 根据当前项的独立状态显示/隐藏详情 -->
      <ion-grid *ngIf="people.isExpanded">
        <ion-row>Gender: {{people.gender}}</ion-row>
        <ion-row>Birth Year: {{people.birth_year}}</ion-row>
        <ion-row>Species: {{people.species}}</ion-row>
        <ion-row>Height: {{people.height}} centimeters</ion-row>
        <ion-row>Weight: {{people.mass}} Kilograms</ion-row>
        <ion-row>Skin Colour: {{people.skin_color}}</ion-row>
        <ion-row>Hair Colour: {{people.hair_color}}</ion-row>
      </ion-grid>
    </ion-list>
  </ion-card>
</ion-content>

逻辑说明 #

1. 独立状态管理：现在每个搜索到的people对象都有自己的isExpanded属性，默认处于收起状态，彼此之间互不影响。
2. 精准状态切换：点击某一项时，只会修改该项的isExpanded值，不会触发其他项的状态变化。
3. 搜索重置状态：每次执行新搜索时，所有新结果都会被重置为收起状态，符合用户的使用预期。

这样修改后，点击任意一个人物项，就只会展开/收起该项的详情内容啦～

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