Question

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

我现在创建的是，当输入诸如“ skywalker”之类的名称并单击显示为该人扩展手风琴列表的结果之一时。当我单击一个时，所有出现的结果都将扩展。

swapi.page.ts

render()

swapi.page.html

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


  }
}

environment.ts

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

我如何只能单击一个扩展列表并仅打开该列表。

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

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

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

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

2 个答案: