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

Question

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

我现在创建的是，当输入像"天行者"这样的名字并单击其中一个结果时，该结果似乎可以扩展该人的手风琴列表.当我单击一个结果时，出现的所有结果都会展开。

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>

环境.ts

export const environment = {
swapiUrlBase: "https://swapi.co/api/"
};

我怎么只能单击其中一个展开列表并仅打开该列表。

Answer 1

您可以在 *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;
}

Answer 2

在您的代码中，您已经定义了变量来显示隐藏元素，但是无法识别要显示/隐藏的变量，您可以获得该简单标识符，在您的情况下您可以使用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;
}

工作演示(单个+多个显示/隐藏(