Angular 使用ngFor和ngIf打开手风琴列表时如何仅打开一个列表

我正在Ionic中创建一个手风琴列表，使用ngFor和ngIf显示来自swapi的数据

我现在创建的是，当输入一个像“天行者”这样的名字并点击其中一个结果时，会显示该人的手风琴列表。当我点击其中一个时，所有出现的结果都会展开

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';
import { map, flatMap } from 'rxjs/operators';
import { Observable, forkJoin, of } from 'rxjs';
import { element } from '@angular/core/src/render3';
import { forEach } from '@angular/router/src/utils/collection';
import 'rxjs/add/operator/map'

@Component({
  selector: 'app-swapi',
  templateUrl: './swapi.page.html',
  styleUrls: ['./swapi.page.scss'],
})
export class SwapiPage implements OnInit {
  hideMe: boolean;
  testHiding: boolean;



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

  ngOnInit() { }

  hideTest: boolean;
testHiding: boolean;

  //Search Result variables for people 
  swapiPeople: any;

  hidingTest() {
    if (this.testHiding) {
      this.testHiding = false;
      console.log("Test Hide false")
    } else {
      this.testHiding = true;
      console.log("Test Hide true")
    }

    //Searches for people in Swapi
    this.http.get(`${environment.swapiUrlBase}people/?search=${this.swapiSearch}`).subscribe((data: any) => {
      this.swapiPeople = data.results
      console.log(this.swapiPeople)
    })


  }
}

swapi.page.html

<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)="hidingTest()" debounce=1000>
    </ion-searchbar>
  </ion-toolbar>
</ion-header>

<ion-content color="creame">
  <ion-card>
    <ion-list *ngFor="let people of swapiPeople">
      <ion-item (click)="hidingTest()">
        <label>{{people.name}}</label>
      </ion-item>
      <ion-grid *ngIf="testHiding === false">
      <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>

---

我如何才能只单击展开列表中的一个并只打开该列表。

在您的代码中，您已经定义了显示隐藏元素的变量，但无法确定要显示/隐藏哪个元素，您可以获得一个简单的标识符，在您的情况下，您可以使用

people.id

我根据您的代码创建了一个简单的代码片段，希望这能消除您的疑虑：

HTML:

<div *ngFor="let obj of swapiPeople">
    <span (click)='hidingTest(obj)'>
        Click Me : {{ obj.objectNo }}
    </span>
    <div *ngIf="selected == obj.id">
        <h4>{{ obj.value }}</h4>
    </div>
    <hr />
</div>

selected;

hidingTest(peopleObj) {
    this.selected = peopleObj.id;
}

---

（单个+多个显示/隐藏）

您可以在*ngFor指令中使用索引：

<ion-content color="creame">
  <ion-card>
    <ion-list *ngFor="let people of swapiPeople let i = index">
      <ion-item (click)="hidingTest(i)">
        <label>{{people.name}}</label>
      </ion-item>
 <ion-grid *ngIf="testHiding === index">
     ...
    </ion-grid>
    </ion-list>
  </ion-card>


component:
hidingTest(index) {
this.testHiding = index;
}

{{people.name}
...
组成部分：
隐藏测试（索引）{
this.testHiding=index；
}

<ion-content color="creame">
  <ion-card>
    <ion-list *ngFor="let people of swapiPeople let i = index">
      <ion-item (click)="hidingTest(i)">
        <label>{{people.name}}</label>
      </ion-item>
 <ion-grid *ngIf="testHiding === index">
     ...
    </ion-grid>
    </ion-list>
  </ion-card>


component:
hidingTest(index) {
this.testHiding = index;
}